The horizontal position and size of a non-floating, block-level element is determined by seven properties:
The sum of these seven properties is always equal to the ‘width’ of the parent element.
DIVs have no "footprint". Because #aqua, #yellow, and #pink are empty, they collapse.
For replaced elements, a value of
auto on ‘width’ is replaced by the intrinsic width, so for them there can only be two
If exactly one of
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
auto, they will be set to equal values. This will center the element inside its parent.
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.