Padding issues

[grosberg.michael]

Please help me understand something about padding: As far as I know,
padding is supposed to be on the "inside" of an element. Common logic
would imply, therefore, that if you assign an element a certain height
and width, and also give it a padding through CSS, then the element
would retain its stated size and render the content in a smaller area
(size minus the padding) inside the element.

But I just found out that is not the case! In bth Firefox and Explorer
padding is added to the stated size . Worse still, in firefox, padding
in table cells is added to the left and right sides but not to the top
and bottom!

Is that how these things are supposed to behave?

 

[David Dorward]

Please help me understand something about padding: As far as I know,
padding is supposed to be on the "inside" of an element.

No, it goes between the content of an element and its border.

Is that how these things are supposed to behave?

Yes. http://www.w3.org/TR/CSS21/box.html#mpb-examples has diagrams.

 

[Ed Seedhouse]

Please help me understand something about padding: As far as I know,
padding is supposed to be on the "inside" of an element. Common logic
would imply, therefore, that if you assign an element a certain height
and width, and also give it a padding through CSS, then the element
would retain its stated size and render the content in a smaller area
(size minus the padding) inside the element.

But I just found out that is not the case! In bth Firefox and Explorer
padding is added to the stated size .

Is that how these things are supposed to behave?

It is how CSS is specified. Padding and borders are to be added to
width. IE5 and below and IE6 in quirks mode do it the "wrong" way,
which, to you, is the "right" way.

If you want to take it up with the people who made the specification
feel free. You might find that they had actual reasons for doing it
that way, they usually do.

 

[Jukka K. Korpela]

Scripsit (e-mail address removed):

As far as I know,
padding is supposed to be on the "inside" of an element.

Right. It's between the element's content and its edge.

Common logic
would imply, therefore, that if you assign an element a certain height
and width, and also give it a padding through CSS, then the element
would retain its stated size and render the content in a smaller area
(size minus the padding) inside the element.

That would be common logic, but as others have explained, people who
designed CSS took a different view. Moreover, Microsoft didn't agree in
practice, causing much confusion, though this is now being cleared up,
slowly.

The thing that makes the CSS design obscure to common logic is the choice of
_words_, names for properties. Many CSS property names are misnomers.

The height and width properties should really have been called
content-height and content-width. It's too late to change now, of course.

In bth Firefox and Explorer padding is added to the stated size .

You might say so, but it's really just about padding and the height or width
of the element's _content_. Both are set separately.

Worse still, in firefox, padding
in table cells is added to the left and right sides but not to the top
and bottom!

Are you sure? URL?

 

[Vince Morgan]

Please help me understand something about padding: As far as I know,
padding is supposed to be on the "inside" of an element. Common logic
would imply, therefore, that if you assign an element a certain height
and width, and also give it a padding through CSS, then the element
would retain its stated size and render the content in a smaller area
(size minus the padding) inside the element.

But I just found out that is not the case! In bth Firefox and Explorer
padding is added to the stated size . Worse still, in firefox, padding
in table cells is added to the left and right sides but not to the top
and bottom!

Is that how these things are supposed to behave?

It won't help you, and it won't help me, but I realy do have to agree with
you in respect to padding. I think it breaks the encapsulation that a <div>
is supposed to represent entirely, and adds unwanted and perhaps even
unwarranted complexity.
It is very rare that you will see me agree with MS on such things, but on
this I do. Perhaps there were very good reasons for the current
implementaion. I certainly hope so.
Vince Morgan

 

[grosberg.michael]

Scripsit (e-mail address removed):


That would be common logic, but as others have explained, people who
designed CSS took a different view. Moreover, Microsoft didn't agree in
practice, causing much confusion, though this is now being cleared up,
slowly.

Ah well. Thanks for the feedback everybody. I'm not going on a crusade
on this - I guess I can work with it the way it is.

Are you sure? URL?

Umm, test this (I found it on firefox 2):

<html>

<head>
<title>test</title>
</head>
<body>
<table>
<tr>
<td style="width: 200px; height: 200px; background-color: cyan;
vertical-align: top; padding: 50px">sample text
</td>
</tr>
</table>
</body>
</html>

 

[Jonathan N. Little]

Umm, test this (I found it on firefox 2):

<html>

<head>
<title>test</title>
</head>
<body>
<table>
<tr>
<td style="width: 200px; height: 200px; background-color: cyan;
vertical-align: top; padding: 50px">sample text
</td>
</tr>
</table>
</body>
</html>

Looks the same to me in FF2 and IE6. But "height" property on table
cells behave differently then other block elements, and that may be the
trouble. Tables cells tend to adjust to fix content, which is desirable
for tabular data, but not for layout. But then again, you should not use
a table for layout. Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>test</title>
</head>
<body>
<div style="width: 200px; height: 200px; background-color: cyan;
vertical-align: top; padding: 50px">sample text
</div>
</body>
</html>