Padding in CSS

[pinkotoad]

I've noticed that Netscape adds the padding onto the width and height of an object so: <div style="width:100px;height:100px;padding:50px;"> returns a box that is 200px wide, and 200px high. I've also noticed that IE adds padding-top onto the total height of an object.

The very word padding implies that it is inside the object and not added onto to. If you were to pad a cardboard box with styrofoam, you would put the styrofoam on the inside, and it would not add to the dimensions of the box. If we wanted to add onto the width or height, we would simply specify a larger number.

(Need to learn to proofread posts)

[jkd]

Too bad W3C disagrees with you.

Internet Explorer for Windows makes a travesty of the CSS box model, but is partially fixed in IE6 in strict mode.

Mozilla always implements the correct box model regardless of doctype, as does any other standards compliant browser such as Opera. IE5/Mac also implemented it correctly.

There is really no point to this poll - if you design to IE5/Windows|IE6/BackCompat/Windows, then you are designing incorrectly.

The more I use Gecko, the more I hate IE for lacking any of the real powerful CSS2 features, as well as its blatant inconsistencies with the specs.

[pinkotoad]

Mmmm that came out all wrong. I would be the LAST person to endorse a Microsoft product. I generally make a separate CSS file for IE/WIN to save time I would have spent writing workarounds. :mad:

What I meant to say, how would you, the individual (not the standards group) like to see padding rendered.

In the future, I'll be more careful in the future not to say anything like compliment about Microsoft.

[jkd]

Originally posted by pinkotoad
What I meant to say, how would you, the individual (not the standards group) like to see padding rendered.

It makes more sense to me to be able to define the content width explicitly, and account for additional padding and borders on my own, rather than figure out to define the width of this content, I'll need to subtract borders and padding and etc...

[joh6nn]

whether you have the padding adding to the width, or have it inside the box, you still have to do a little math to figure out the dimensions of your content. and you have to admit, it doesn't make sense to explicitly set the width of the box, and have that not be the actual width of the box. i can live with the w3c system, though i'd rather have it the other way.

[brothercake]

Either method is the same level of usefulness - inside the box or outside the box, I can account for either as long as it's predictable which one I have to account for. It's only the unpredictability which bugs me.

Let not forget about "defacto" or "implied" standards - those which arise in practise, as a result of what people actually do. In a sense, IE's box model is more standardised than the w3c method, even though it's "wrong", simply because its more commonly used.

So yeah - given the preference I would rather that IE's "broken" box model were the standard

[jkd]

Originally posted by brothercake
simply because its more commonly used.

I would consider IE6/Win, IE5/Mac, all Gecko-based browsers, Opera, and all other standards-compliant CSS browsers more standard that just IE4/Win and IE5/Win.

[mouse]

Um, what was the question again? :confused:

I agree padding should be inside but I thought Moz did that already...

[brothercake]

Originally posted by jkd
I would consider IE6/Win, IE5/Mac, all Gecko-based browsers, Opera, and all other standards-compliant CSS browsers more standard that just IE4/Win and IE5/Win.


All of those browser together are still a minority, compared with win/ie5; and its box model is the most commonly used. that was the point I was making.

What's so wrong with the standards being flexible to "incorrect" interpretations - ie, the standards can change in response to a common implementation - standards are not sacraments.

[BrainJar]

I think the point of the W3C definition is that width and height are applied to content - text and images. Padding, borders and margins are kind of extras that relate to visual presentation. So the idea is to avoid a dependency between the those presentational elements and the content.

Of course, all that doesn't help when you're just trying to make a page look good. But you can have it both ways. If you want to fix the overall dimensions of an element, wrap a DIV tag around it with the width and height you want:

<div style="width:200px;height:100px;">
<div style="border:1px solid;padding:10px;width:100%;height:100%">Some text.</div>
</div>

[brothercake]

Must admit, I hadn't thought of it like that. And that's an interesting technique :)