The CSS box model is responsible for calculating:
- How much space a block-level element takes up.
- Whether or not borders and/or margins overlap, or collapse.
- A box’s dimensions
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
The box model has the following rules:
- The dimensions of a block element are calculated by
width
,height
,padding
,borders
, andmargins
. - If no height is specified, a
block
element will be as high as the content it contains, plus padding (unless there are floats, for which see below). - If no width is specified, a non-floated
block
element will expand to fit the width of its parent minus padding. - The
height
of an element is calculated by the content’s height. - The
width
of an element is calculated by the content’s width. - By default,
paddings
andborders
are not part of the width and height of an element.