Width, height and margins

References

  1. CSS 2.2 Visual formatting model details
  2. CSS Box Sizing Module Level 3

Comparison of box model properties

Property Supported values Can have negative value Initial value Percentages based on Other notes
length <percentage> auto Other
margin Yes Yes Yes Yes 0 width of containing block
border-width Yes No No thin, medium, thick No medium n/a If border-style is not set then border-width becomes 0.
padding Yes Yes No No 0 width of containing block
width
height 		Yes Yes Yes No auto width or height of containing block width and height refers to the content area of an element, this is the area inside the padding (see box model).
top
right
bottom
left		 Yes Yes Yes Yes auto width or height of containing block

Block

Block boxes can have a fixed or auto width and height. If auto horizontal properties will add up to the width on the containing block, and height will wrap the block's contents. Details below:

Width and horizontal margins

For block boxes width the equation that must be balanced is: margin + border + padding + width = width of containing block. This essentially happens by replacing auto values appropriately.

Height and vertical margins

Block boxes height can be set to a fixed height, or if auto will essentially be tall enough to wrap their content. There are slightly different wrapping rules that apply when overflow is not visible or has not been propagated to the viewport.

Negative margins

You can apply negative values to margins which will pull content the opposite way. The spec does not have a lot to say on negative margins with the main description being: Negative values for margin properties are allowed, but there may be implementation-specific limits.

Percentage width and height

Width and height can be set using % values. They are a percentage of the width/height of the element's containing block.

If the containing block has no explicitly specified height then the element's height changes to auto. This does not apply to width.

Special width and height keywords

There are newer keywords that have been added to CSS that can be used with width and height, see below for examples.

Inline

The width and height properties don't apply for inline boxes.

Width is essentially shrink-to-fit. Horizontal margin, border and padding apply, though become zero if auto.

Height is determined by the element's font size. Vertical border and padding apply but they don't affect the size of lines so may overlap other lines. Vertical margin does not apply.

Inline block

Inline-block elements are inline-level elements that can have a fixed width, height, margin, padding and border as block elements can.

If width is auto it will be shrink-to-fit.

If height is auto auto it will wrap children, as for block elements.

Absolute

Absolute positioned elements are removed from normal flow and positioned relative to their containing block with the top, bottom, left and right properties.

Width and horizontal margins

The static position is the position an element would have had if it had been laid out in normal flow.

The equation that must be balanced is: left + margin + border + padding + width + right = width of static-position containing block.

The following rules apply:

  1. If left, right or width are auto
    1. auto values for margin-left and margin-right become zero.
    2. If width && (left || right) are auto then width becomes shrink-to-fit.
    3. If left && right are auto then left (if ltr) gets set to the static position. Note this is the default as left,right, and width all default to auto.
    4. The final auto gets set according to the equation. This can include becoming negative for left or right. width sometimes stops at shrink-to-fit or sometimes goes below depending on the browser.
  2. Else
    1. If both horizontal margins are auto they get assigned equal value to solve the equation.
    2. Unless this could make a margin negative, in which case margin-left (if ltr) is set to zero and solve for right.
    3. If one margin is auto then solve for that margin.
    4. If the values are over-constrained margin-right (if ltr) becomes auto.

Height and vertical margins

The logic for calculating the vertical properties of absolute elements is basically the same as for the the horizontal ones.

Specifically the equation is: top + margin + border + padding + height + bottom = height of static-position containing block.

The one difference from the horizontal examples is step 2.2 doesn't apply - the margins can both be negative and they will be made to balance as in step 2.1.

Replaced elements

These are elements such as images whose formatting is outside the scope of CSS, see here for more details. They can have an intrinsic height, weight and ratio. Essentially auto values are replaced to try and satisfy these intrinsic dimensions.

The rest of the calculations are basically as normal according to the box and position of that element.