CSS Box Model
http://css-tricks.com/the-css-box-model/
The CSS Box Model
PUBLISHED BY CHRIS COYIER
At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We've talked about thepositioning of these boxes a bit, and about their behavior.
The diagram:
Notice in both examples the margin is in the white. Margin is unique in that it doesn't affect the size of the box itself per se, but it affects other content interacting with the box, and thus an important part of the CSS box model.
The size of the box itself is calculated like this:
| Width | width + padding-left + padding-right + border-left + border-right |
| Height | height + padding-top + padding-bottom + border-top + border-bottom |
If you don't declare a width, and the box has static or relative positioning, the width will remain 100% in width and the padding and border will push inwards instead of outward. But if you explicitly set the width of the box to be 100%, the padding will push the box outward as normal.
The lesson here being that the default width of a box isn't really 100% but a less tangible"whatever is left". This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
The biggest ass-biter I always find with this is text area elements, which very much need their widths set to fight the required "cols" attribute, and are unable to have children elements. So you often need the text area to be explicitly set to 100%, yet have padding as well, pushing it too large to fit. In a static width environment, we often resort to pixel widths that fit, but no such luck in fluid width environments.
The lesson here being that the default width of a box isn't really 100% but a less tangible"whatever is left". This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
The biggest ass-biter I always find with this is text area elements, which very much need their widths set to fight the required "cols" attribute, and are unable to have children elements. So you often need the text area to be explicitly set to 100%, yet have padding as well, pushing it too large to fit. In a static width environment, we often resort to pixel widths that fit, but no such luck in fluid width environments.
0 comments