Quick html border question
Are borders applied to the outside or inside of a div?
i.e. would a 2px border around a 20x20px box make it an effective 24x24px box (outside)? or reduce the inside space to 16x16px (inside border)?
Are borders applied to the outside or inside of a div?
i.e. would a 2px border around a 20x20px box make it an effective 24x24px box (outside)? or reduce the inside space to 16x16px (inside border)?
Megan posted this at 14:14 — 31st March 2007.
She has: 11,421 posts
Joined: Jun 1999
I belive it's outside. That causes a lot of problems for percentage-based layouts.
aka Rohan posted this at 15:00 — 31st March 2007.
He has: 200 posts
Joined: Feb 2006
Thanks Megan. Is that the same across all browsers (IE, Firefox, Opera in particular)?
Megan posted this at 20:58 — 31st March 2007.
She has: 11,421 posts
Joined: Jun 1999
No, I'm wrong - it goes inside and that's why it's a problem
total width = margin + border + padding + content width (this is the width you would specify in your CSS)
See here in the W3C specs, under section 8.1 (box model, towards the end):
http://www.w3.org/TR/REC-CSS2/box.html#box-border-area.
So if I specified a width of 25% plus a 1px border, the border would be added on to the 25% to make the full width.
This is true in all modern browsers except IE in quirks mode.
Megan
Connect with us on Facebook!
jesse1 posted this at 12:44 — 2nd April 2007.
They have: 26 posts
Joined: Mar 2007
thanks I have been wondering this too. I think it is slightly different in IE and firefox.
aka Rohan posted this at 14:45 — 2nd April 2007.
He has: 200 posts
Joined: Feb 2006
Sweet, thanks for that info Megan
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.