ansaurus

Question

Borders and margins and padding, oh my! (box model)

Answer 1

+1 A:

There are several problems here. First of all, you need a reset CSS to remove the margin and padding added by the browser's User Agent stylesheet. Something like Eric Meyer's will do.

Secondly, after adding in the reset CSS there still will be some overlapping. This is caused by the borders, the widths of which are not part of width. outline is not affected by this, so I'm using that in the demo below to show that the elements are not actually overlapping, but I won't recommend using that in place of border. Instead, you should take into account the width of the border when doing your calculations.

See: http://jsbin.com/ofusa3/edit

Yi Jiang 2010-09-24 02:39:35

+1 This is a great help! And I noticed that you very very helpful on my previous questions too. Thanks. Ok, I liek the idea of a reset file. Now, if you look at the diagram of http://www.w3.org/TR/CSS2/box.html then I presume that 'outline' is teh outermost dotted line? And I was mistakenly thinking that that was the border. So, if I understand you, you are saying that I should add X to top/left and subtract X from width/height to achieve the same visually as you did with outline? And X = border width? Nvm, I will play around with it. Thank you very much.

LeonixSolutions 2010-09-24 02:55:41

Shoudl I add X to top/left, subtract 2X from width/height and add a margin if X?

LeonixSolutions 2010-09-24 02:59:18

@Leonix No, that's not what I mean. The `outline` property is usually used for "debugging" CSS positioning problems, since it doesn't affect the total width of the element. Maybe instead of reading the actual specs, which are usually too technical, something like: http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/ will help you understand this better

Yi Jiang 2010-09-24 03:12:28

@Leonix Also, `outline` is applied in the same manner as `border`, except that it is rendered in such a way that the final width of the element is not affected. Final width here being `width` + `border-width` + `margin`

Yi Jiang 2010-09-24 03:14:05

LeonixSolutions 2010-09-24 03:26:20

@Leonix You should take `border` into account here by subtracting `border-width` * 2 (for either side of the box) from the width entered by the user. That should be the correct solution to this problem. `outline` does not render consistently with some elements and IE 6 doesn't support it.

Yi Jiang 2010-09-24 03:42:39

+1 and the answer - thanks

LeonixSolutions 2010-09-25 01:43:08

ansaurus

tags:

views:

answers:

Borders and margins and padding, oh my! (box model)

related questions