block-level elements

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). They begin on new lines. Several values of the ‘display’ property make an element block-level.

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.

Three of the seven properties can be set to auto:

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.

Try These

Watch This

Check This

<div id="aqua"></div> <div id="yellow"></div> <div id="pink"></div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).