An illustration of the visual relationship between Margins, Borders and Padding:
The margin is the gap between the border and the edge of the box, it is always transparent. The default margin is 0.
Setting a margin creates a gap between adjacent boxes.
The vertical space between two adjacent boxes is the same as the outer edges - the browser does not add together the bottom and top margins of adjacent boxes, they are merged - the larger of the two will be used. This collapsing of margins only applies to vertical, not horizontal margins.
An outline is shown in dotted green. Outlines differ from borders in that they do not take up space, they are drawn above the content and extend out towards the margin. The default <A> outline in many browsers is a dotted line that is used primarily as an aid for keyboard navigation. If made large enough an outline can overlap the margin but this is not common.
A border is shown in blue, this sits outside both the content and the padding.
Background settings for an element apply to the area inside the borders including both the padding and content areas. The background will also be visible in the gaps of a dashed or dotted border.
The gap between the blue border and the text is called padding, padding applies to any of the content within a box and helps to increase readability.
The boxes above have a fixed height: 60px watch what happens if you make the browser window very narror so that the text no longer fits inside a 60px height (also see responsive web design.)
By default the height and width of an element will be changed by adding a border e.g. if an element has a height: 100px; and the top and bottom borders are both 10px, then the total height will become 120px
Padding will also affect the size of the element, so if we add 5px of top and bottom padding to the example, the total height of the element becomes 130px
If box-sizing is set to border-box then this behaviour will change, the border will extend inwards without making the element larger unless the two borders are larger than the element, e.g. if an element has a height: 100px; and the top and bottom borders are both 10px, then the total height will stay as 100px but if the borders are increased to 55px then the element would grow to 110px.
Similarly adding padding will not change the size of the element unless the height or width are too small to accomodate it.
Box-sizing has no effect on margins or outlines.
A box can contain any number of other boxes.
Try it:
This text is the content area of the Box model, it is surrounded by padding, a border, an outline and margins on all four sides. The size, appearance and visibility of the various elements of the box model can be modified by adjusting the relevant CSS properties. |
“When working with CSS finally drives you mad the padded cell that they will put you in
has the padding on the inside of the walls” ~ Simon Keep
Related:
border-width - Width of the four borders.
box-sizing - The CSS box model used to calculate the height and width of elements. (CSS 3)
display - How to display an HTML element: block or inline boxes.
margin - Set all the margin properties.
padding - Set all the padding properties.
BrainJar explanation of CSS positioning