block-level elements
The horizontal position and size of a non-floating, block-level element is determined by seven properties:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
The sum of these seven properties is always equal to the ‘width’ of the parent element.
DIV
s have no "footprint". Because #aqua, #yellow, and #pink are empty, they collapse.
auto
:
margin-left
width
margin-right
For replaced elements, a value of auto
on ‘width’ is replaced by the intrinsic width, so for them there can only be two auto
values.
If exactly one of margin-left
, width
, margin-right
is auto
, the UA will assign that property a value that will make the sum of the seven equal to the parent’s width.
If none of the properties are auto
, the value of ‘margin-right’ will be assigned ‘auto’.
If more than one of the three is auto
, and one of them is ‘width’, then the others (‘margin-left’ and/or ‘margin-right’) will be set to zero and ‘width’ will get the value needed to make the sum of the seven equal to the parent’s width.
Otherwise, if both margin-left
and margin-right
are auto
, they will be set to equal values. This will center the element inside its parent.
If auto
is set as the value for one of the seven properties in an element that is inline or floating, it will be treated as if it were set to zero.