CSS Box Model
CSS Box Model
The box model represents how elements are interpreted and displayed in an HTML document. Each element is seen as a box which contains certain properties that describes how it is viewed within that document.
Common properties for elements include margin, border, and padding. The margin of a box represents the outside area of a box or the area between its border and other elements. The border is simply the boxes border. Its optional and can have different styles such as grooved, dotted, or just plain solid. Between the border and the actual content the box contains is the padding. It is like a margin for the content and the border.
When sizing boxes with styles, width and height represent the content's width and height. It does not include the dimensions of the margin, border, or padding. The top, right, bottom, and left properties of a box, however, measure from the extents of a boxes margin, not its contents.
Note: IE5 incorrectly includes margin, border, and padding in the width and height of an element.
There is another aspect of the box model that is not so intuitive, margin collapsing. This is when margins of elements above and below each other collapse into one size.
The box model represents how elements are interpreted and displayed in an HTML document. Each element is seen as a box which contains certain properties that describes how it is viewed within that document.
Common properties for elements include margin, border, and padding. The margin of a box represents the outside area of a box or the area between its border and other elements. The border is simply the boxes border. Its optional and can have different styles such as grooved, dotted, or just plain solid. Between the border and the actual content the box contains is the padding. It is like a margin for the content and the border.
When sizing boxes with styles, width and height represent the content's width and height. It does not include the dimensions of the margin, border, or padding. The top, right, bottom, and left properties of a box, however, measure from the extents of a boxes margin, not its contents.
Note: IE5 incorrectly includes margin, border, and padding in the width and height of an element.
There is another aspect of the box model that is not so intuitive, margin collapsing. This is when margins of elements above and below each other collapse into one size.
Comments