[SOLVED] - CSS Padding

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

[SOLVED] - CSS Padding

Post 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
Last edited by iknownothing on Mon Mar 12, 2007 11:10 pm, edited 1 time in total.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post 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/
(#10850)
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post 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.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post 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.
(#10850)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply