Box Model
When styling elements you can control the width, height, margin, border, and padding
of the element. All document elements create a box that defines how it's laid
out in the document. The box model is defined as follows.
- Margin
- Definition: The distance from the extreme edge of the element to its border.
The distance is used to push the element away from adjacent elements.
- The margin of each side of the element can be defined independently
- No part of the element or its content displays in the margin area (think of it as
the clear edge of plastic extending pas the edge of a card that is laminated).
- The background of the parent container for the element will show through in the
margin area.
- Touching margins of adjacent elements collapse to the largest touching margin.
I.E. If we have a H1 element above a P element (they would stack on top of each
other both being block level elements) and the bottom margin of the H1 element is
15px and the top margin of the P element is 10px then the clear distance between
these elements would be 15px. They do not add! A 15px margin satisfies
both margin requirements. So margin in another sense can be thought of the
minimum distance to the next element. There is an exception to the behavior
of collapsing margins. This would be when an element is floated. Floated
elements retain their full margin in the layout. That would be a case of addition
with touching margins.
- Border
- Definition: The line surrounding the padding and content of an element.
- The line width, style (solid,dashed,dotted,none,double,groove,ridge,inset,outset),
and color of each border line can de defined independently.
- The default border style is none so that no border shows.
- The default color of the border is the contents text color.
- Padding
- Definition: The distance from the border to the element content.
- The default padding for an element is 0. It's good to set some paddding if
a border is going to be used or the content will crowd the border. Setting
some padding is also a good idea if the background-color is set to contrast against
its parent element other wise your crowding the edge of the elements color..
- Any background settings for the element extend into the padding.
- Width, Height
- Definitions: The Width and Height properties are the horizontal and vertical distance
of the content area only. The width and height does not include any border, padding,
or margin in its distance.
- Internet Explorer 5 incorrectly include border and padding into the width.
This was fixed in Internet Explorer 6.