Page 1 of 1

[SOLVED] - CSS Padding

Posted: Mon Mar 12, 2007 10:25 pm
by iknownothing
Hey All,
This may sound stupid, but how come when I set a DIV's padding, it pushes out of its boundaries, I though padding was only used within the element, to keep text and images away from the edges etc? Am I supposed to add padding to something other than the DIV containing the content?

Thanks

Posted: Mon Mar 12, 2007 10:51 pm
by Christopher
You might want to Google for "CSS box model" for more information about how margins and padding work. Here is a link with a picture that shows what is going on.

http://www.ilovejackdaniels.com/css/box-model/

Posted: Mon Mar 12, 2007 11:06 pm
by iknownothing
Thanks for the link. The correct way seems like the messy way, I can't see how taking off the padded section should accurately define width of a div, especially when alot of the time, the total width is a nice neat number (eg. 100px) but, if its how its done, its how its done.

Posted: Mon Mar 12, 2007 11:12 pm
by Christopher
That's how it's done. You need to subtract to get the actual content width. But that is the easy part. The worst part is that it does not always look the same across browsers.

Posted: Tue Mar 13, 2007 1:31 am
by matthijs
Meaning that IE 5 or IE6 in quirks mode do the wrong thing. The have the model as you expected it to be. They will place the padding inside the width. So box in FF is 100px width + 2x10px padding = 120px. Same box in IE5 is 100px.