By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

padding problem..

P: n/a
hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

<div class="divMore" align="right"><a href="">Read More</a></div>

and in css:

..divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..
my understanding is padding puts padding between edge of element and
content of element, it's not supposed to ADD to DIMENSION of element..
this is causing me difficulties.. :( please, what am I missing...

thank you very much..


Nov 27 '07 #1
Share this Question
Share on Google+
11 Replies


P: n/a
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

<div class="divMore" align="right"><a href="">Read More</a></div>

and in css:

.divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..
my understanding is padding puts padding between edge of element and
content of element, it's not supposed to ADD to DIMENSION of element..
this is causing me difficulties.. :( please, what am I missing...

thank you very much..
A doctype? A modern browser? And finally, a URL so we can see.

--
dorayme
Nov 27 '07 #2

P: n/a
dorayme wrote:
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
>hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

<div class="divMore" align="right"><a href="">Read More</a></div>

and in css:

.divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..
my understanding is padding puts padding between edge of element and
content of element, it's not supposed to ADD to DIMENSION of element..
this is causing me difficulties.. :( please, what am I missing...

thank you very much..

A doctype? A modern browser? And finally, a URL so we can see.
sorry, can't share url, this is at work, development server, not live
yet.. don't have time now to re-create (maybe tonight @ home..) doctype
being used is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

choice of doctype is not mine, that can't change...

so what's the difference, then, between padding and margin??? I mean
how then are you supposed to add padding space so content of an element
is not against the edge of element??? :(

thank you..
Nov 27 '07 #3

P: n/a
dorayme wrote:
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
>hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

<div class="divMore" align="right"><a href="">Read More</a></div>

and in css:

.divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..
my understanding is padding puts padding between edge of element and
content of element, it's not supposed to ADD to DIMENSION of element..
this is causing me difficulties.. :( please, what am I missing...

thank you very much..

A doctype? A modern browser? And finally, a URL so we can see.
so if I have a <tdthat's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...

Nov 27 '07 #4

P: n/a
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
so if I have a <tdthat's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...
Perhaps something like

http://netweaver.com.au/alt/maya.html

I guess.

--
dorayme
Nov 27 '07 #5

P: n/a
dorayme wrote:
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
>so if I have a <tdthat's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...

Perhaps something like

http://netweaver.com.au/alt/maya.html

I guess.
yes, but did u measure that <td>?? I did a screenshot and measured in
Photoshop, it's 420px wide....;)

thank you though, I appreciate your help....

Nov 27 '07 #6

P: n/a
maya wrote on 27 nov 2007 in comp.infosystems.www.authoring.stylesheets:
dorayme wrote:
>In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
>>so if I have a <tdthat's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...

Perhaps something like

http://netweaver.com.au/alt/maya.html

I guess.

yes, but did u measure that <td>?? I did a screenshot and measured in
Photoshop, it's 420px wide....;)
try:

<http://www.mioplanet.com/products/pixelruler/>

Cheaper and faster than PS.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Nov 27 '07 #7

P: n/a
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
dorayme wrote:
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
so if I have a <tdthat's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...
Perhaps something like

http://netweaver.com.au/alt/maya.html

I guess.

yes, but did u measure that <td>?? I did a screenshot and measured in
Photoshop, it's 420px wide....;)

thank you though, I appreciate your help....
Oh you are still worried about that business. Sorry. I have said
things about that in another post, so has Jonathan Little. Did
you get those?

Do you understand what I was saying about it being more than just
according to standards but common sense that padding will
increase height or width naturally and that height and width
specifications cannot be thought to be max height and width. On
this latter, here is another argument: suppose you tell an
element which from its natural content would be say 200px tall,
to be only 20px tall. What do you think should happen, what does
happen? In other words, height instructions are not king. There
are other things that go on to temper and add and probably
subtract.

(btw You don't need Photoshop, download the Firefox browser and
then down load the web developer tools. You will find an
excellent ruler in it that is a easy to use right there on the
webpage).

--
dorayme
Nov 27 '07 #8

P: n/a
On 2007-11-27, dorayme <do************@optusnet.com.auwrote:
[...]
Do you understand what I was saying about it being more than just
according to standards but common sense that padding will
increase height or width naturally and that height and width
specifications cannot be thought to be max height and width. On
this latter, here is another argument: suppose you tell an
element which from its natural content would be say 200px tall,
to be only 20px tall. What do you think should happen, what does
happen?
Unless it's a table cell, row or table, it should be exactly 20px tall
and the content overflows. Usually you can still see it, but only
because the overflow property is set to visible.
In other words, height instructions are not king. There
are other things that go on to temper and add and probably
subtract.
Apart from tables, you should always get exactly the height you ask
for (measured between the top and bottom inside-padding edges).
Nov 28 '07 #9

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2007-11-27, dorayme <do************@optusnet.com.auwrote:
[...]
Do you understand what I was saying about it being more than just
according to standards but common sense that padding will
increase height or width naturally and that height and width
specifications cannot be thought to be max height and width. On
this latter, here is another argument: suppose you tell an
element which from its natural content would be say 200px tall,
to be only 20px tall. What do you think should happen, what does
happen?

Unless it's a table cell, row or table, it should be exactly 20px tall
and the content overflows. Usually you can still see it, but only
because the overflow property is set to visible.
In other words, height instructions are not king. There
are other things that go on to temper and add and probably
subtract.

Apart from tables, you should always get exactly the height you ask
for (measured between the top and bottom inside-padding edges).
I was thinking too much about table cells, you are right. It was
misleading.

Heights are tricky customers in practice and there are some
delicious counter-intuitive things that are nice to look at and
get clear on:

http://tinyurl.com/272lfm

(this is not intended as any dispute with you or anyone, just a
reminder to myself to make up an easy to remember story to think
of these things as a hobby maybe over the Xmas break... <gJust
btw, MacIE and no doubt WinIE 6 are a bit more intuitively what
you would expect on above url. I have not looked at Win, but
MacIE is a tiny clue to me.)

--
dorayme
Nov 28 '07 #10

P: n/a
On 2007-11-28, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
[...]
Heights are tricky customers in practice and there are some
delicious counter-intuitive things that are nice to look at and
get clear on:

http://tinyurl.com/272lfm

(this is not intended as any dispute with you or anyone, just a
reminder to myself to make up an easy to remember story to think
of these things as a hobby maybe over the Xmas break... <gJust
btw, MacIE and no doubt WinIE 6 are a bit more intuitively what
you would expect on above url. I have not looked at Win, but
MacIE is a tiny clue to me.)
The thing about heights is that they are completely different from
widths.

Normal-flow auto width depends only on the container and is greedy.
Normal-flow auto height depends on the contents and is conservative.
This is a big difference.

Setting height explicitly is always going to be risky for any element
that has contents, because they might not fit. Setting width explicitly
is less risky because (in most cases) the contents will flow into the
space available and just take up a bit more height as a result.

Width is something a containing element dictates to its descendents
anyway (so it's mostly OK to set it explicitly), but height is the other
way round. The descendents determine how high the container needs to
be, and it's best advised to listen to them.
Nov 28 '07 #11

P: n/a
On 2007-11-28, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
[...]
>The thing about heights is that they are completely different from
widths.

Normal-flow auto width depends only on the container and is greedy.
Normal-flow auto height depends on the contents and is conservative.
This is a big difference.

Yes. I take it that you mean that in, e.g., a <div>, the
container itself is not auto width shrink to fit content but is
auto height shrink to fit according to content.
Yes, although technically the term "shrink-to-fit" (which they do use in
the specification) only applies to widths-- it means min(max(preferred
minimum width, available width), preferred width). There's nothing quite
like that for height. Contents have a height and that's it. There's no
such thing as "preferred minimum height" and available height plays no
part in the height calculation (unless the box is positioned).
Nov 29 '07 #12

This discussion thread is closed

Replies have been disabled for this discussion.