Is it only me that thinks that the ‘padding’ value of html elements getting added to the width value of html elements is stupid? ‘Margin’, yes that should be added because it is on the outside of the element but if I set a div to be 750px wide I don’t mean it to become 770px wide when I add 20px of padding.
Whose bright idea was that?
The idea is that the width value is the size of the content within the container. So if you have a div with width: 300px; padding: 20px; border: 1px solid #000; your content is constrained within 300px with your border being 20px away from it.
Hi Nick
Thanks for dropping by
That sounds fair enough I suppose but still for me I think it would make more sense to make the element the style was applied to maintain the width you set and have the padding subtracted inside if that makes sense.
For example, if I have an outer div for my page that is say 740px wide and I want two columns with a bit of padding I’d like to be able to split that into two, 200px and 540px and have done with it but once you have to start worrying about 2 x the border thickness and 2 x the padding I think it just complicates matters.
Perhaps I’m only thinking of a couple of examples and there are undoubtedly other uses where the way it actually works makes more sense but I still think, for me at least, it is arse about face.
Graham, you may already know this but if not. Remember that IE box model.
IE box model aside. If I declare a div with width:100px and padding:20px, even in Firefox it comes out 140px wide, regardless of the content which doesn’t have any width specified (as there isn’t any in this example). Surely if I wanted a 140px wide div the way to achieve that should be to state – width:140px.
According to the spec (http://www.w3.org/TR/CSS21/box.html#box-dimensions), and Nick (above) I am actually defining the content width rather than the width of the div and so, in my opinion that is counter intuitive.
I am totally with you that it is counter-intuitive. just like i think it’s counter-intuitive for a lot of people to admit that the w3c got something wrong and microsoft got something right.
I totally agree with this post, it is something that has often bothered me.
Yes. Padding excluded from width is shit. I would like to ask some of the W3C guys, how to define percentual width 100% and accurate padding 15px (I mean the inner space between borders and content), so that box will not overflow width of the screen (without bottom scrollbar).
W3C CSS Box model is SHIT SHIT SHIT! And not only box model…
Btw. I know about workaround with next box with margin … but that’s not the solution…
You know really it would make sense to have 2 mutually exclusive values…. either a padded-width for when you know the width of the box and want the content to be padded inside that box, and width for when you know how big the content is and want the box to be padded outside it.
Its really for two cases, the current model is great if you have an image and you want some padding around it, then a border, and then a margin. But the current way stinks when you know you want the page to be a certain size and you want the text within the page to be a few pixels away from the border.
‘Me’ is correctly pointing out why this is broken. With the current box model, you can’t add padding to 100% wide box without causing it to be larger than 100%.
So yea, I agree it doesn’t make sense.
This is a horrible box model. The box model should be geared toward helping web designers cut up their web pages, not for special uses with images or whatever. Graham, I’m sure there are more examples of people frustrated by the current box model than those who are thankful for it (so no need to be sheepish). It just seems counter-intuitive for the width (or height for that matter) not to be the space from border to border.
I understand your disappointment. Lord knows, as a graphic designer, I’ve pulled many a hair out over this very issue.
Though, there is a way. Sort of.
Let’s say, for example’s sake, you have a div that’s 100px wide. You want an element, and h1 or such, to be 100% of that 100px width, but with a 15px padding on the left and right. You can accomplish this by using the padding-specific method and percentages. i.e. -
.example{
width: 100px;
margin: 0;
float: left;
}
.example h1{
width: 70%;
padding-right: 15%;
padding-left: 15%;
margin: 0;
float: left;
}
This is, of course, assuming your containing div is 100px wide, therefore the 15px padding you desire coming out to 15%. Basically, take your full pixel width and find the percentage of that width your desired padding would be. Then define that as your padding.
Hope that helps.
I completely agree. Having the padding add to the specified width is completely stupid. My stylesheets are always full of comments explaining how my widths have been calculated so that when I change some padding or something I can figure out how to adjust the width(s) to keep it the same. I do hate the W3C sometimes.
Me too. For a start, the name, width, implies the width of the element. Just as background means background of the element and border means border of the element. To define width to be width of the content is an inconsistency.
And it takes away some of the usefulness of padding. Suppose you want two panels side by side of equal width, and to have a gap between them. Something like this should work:
.left {
position: absolute;
left: 0;
width: 50%;
padding-right: 1em;
}
.right {
position: absolute;
right: 0;
width: 50%;
padding-left: 1em;
}
Seems I’ll have to either make do with a gutter width in % or add another level of nested divs.
Another annoyance is that the parent div doesn’t grow to their height. And so I find myself using float instead and adding
to the HTML. I think it’s down to the design of the overflow property. It should’ve had a ‘grow’ value from the start. What’s more, this value ought to be the default.
I sometimes wonder whether CSS positioning’s designer (or even W3C) ever actually tried applying it to real-world problems.
“Padding excluded from width is shit. I would like to ask some of the W3C guys, how to define percentual width 100% and accurate padding 15px”
I in fact never use padding because this fu** w3c definition. If I need a “padding” I always use a new div with margin inside the div I want to padd.
Padding as it is is really stupid and unusefull.
Maybe what we need to do is split width into width-value and width-edge or something like that. The values for width-edge could be:
* outside-border
* mid-border (could be useful for tables)
* inside-border
* inside-padding
among possibly other values. And the same for height.