CSS Sizing Cheatsheet

Block level elements by default have width and height that are automatically set based on their content, unless explicitly set.

• the width stretches to the extent of the parent container
• the height stretches to the height of the content unless overridden

For modern layouts, parent blocks can set box-sizing: border-box which is less silly that the default when applying margin border padding

Inline elements width are similarly constrained by the parent's width, but height can't be set directly. If desiring to set height on an inline element, you can use display: inline-block or block (which forces a line break before and after).

The line box is the rect that contains inline-level elements and their content for a single line of text.

• height is determined by tallest inline-level element
• width spans the parent container's content area, adjusting for line wriapping
• alignment within the line box is set vertical-align relative to the baseline
• wrapping creates additional line boxes

The default baseline is where bottom of characters sit. If there is no content, then the baseline is the bottom of the line box. If there are multiple inline elements, then the baseline is determined by the element with the DOMINANT baseline.

An empty line box dimensions is determined by the line-height property if one is found, otherwise it defaults to some multiple of the element's font size. These properties work only in a line box context:

• vertical-align
• line-height
• text-align

An inline-replaced element is one that content is determined by an external datasource (like a loaded image)

There are various box contexts:

• Block Box - rectangular
• Inline Box - defined with context of a line box
• Table Box - created by elements display:table
• Flex Container Box - flex, or inline-flex
• Grid Container Box - display:grid or inline-grid
• Absolutely Containing Box - position: relative absolute fixed
• Multicolumn Container - generated by column-count column-width

To generate a baseline grid, you first start with definine the baseline unit, font size, and line-height that corresponds to it. Apply this to the body.

To force line boxes to align, you can then fiddle with calculated margin-bottom or something like that.