The size of an element in HTML is determined by its content unless overridden through CSS. There are two basic types of element, inline and block, that have width and height, which can be affected further by margin, border, and padding settings.

In general:

• inline elements have both width and height set by the size of the content, and do not generate line breaks, so they line up horizontally unless overridden.
• block elements have a width that stretches to the extent of the partent container, with the height set based on the content. A block by default stacks vertically with its sibling block elements, generating a line break before and after itself.

All elements support padding, border, and margin which can modify the calculated size of the element. The old default was content-box where non-zero values for padding, etc would increase the computed width of the element, even when setting the width and height property directly. That's because the original spec was written by people who were not familiar with screen-based layout. Thankfully, the box-sizing:border-box setting makes the width and height the size of the element, and margin/padding/border is substracted instead of added.

Sizing of Line-based Content

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 wrapping
• 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). Since the content of a replaced image is not known at HTML rendering time, the width and height of the image will change if not specifically provided through CSS styling or using attributes (e.g. <img width=100 height=100>).

Sizing of Block-based Content

As mentioned above, a block element's width stretches to the width of its container, but has a height set to whatever its content is unless explicitly overridden.

When positioning block content side-by-side using flow, converting them to display:inline-block or using float can be used. This creates justification and alignment challenges because inline layout is inherently flaky. For those cases, using FlexBox or Grid is much better. See CSS Layout Notes for more

Reference

Default Container Item Layout Properties

The default value is listed first except for display which is dependent on the specific element. In this list we're only showing the layout manager-specific values and the inline- variants.

display: [block, inline, flex, grid, table]
box-sizing: content-box [border-box]
overflow: visible [hidden, scroll, auto, clip]

Default Sizing Properties

The default value is listed first.

margin: 0 [unit, percent, auto]
padding: 0 [unit, percent, auto]
border: none [unit, solid, dashed, dotted, double...]
width/height: auto [unit, percent, max-content, min-content, fit-content]
max-width/min-width: none [unit, percent]
max-height/min-height: none [unit, percent]

Default Positioning Properties

The default value is listed first.

position: static [relative, absolute, fixed, sticky]
top, left, bottom, right: auto [length, percent]
z-index:auto [integer]

Unit Lengths

ABSOLUTE

• px (pixels)
• cm (centimeters)
• mm (millimeters)
• in (inches)
• pt (points, 1/72 of an inch)
• pc (picas, 1/6 of an inch)

RELATIVE

• % (percentage, relative to parent element)
• em (relative to the font size of the element)
• rem (relative to the font size of the root element)
• vh (relative to 1% of the viewport height)
• vw (relative to 1% of the viewport width)
• vmin (relative to 1% of the smaller viewport dimension)
• vmax (relative to 1% of the larger viewport dimension)
• ch (relative to the width of the "0" character of the font)
• ex (relative to the height of the font’s "x")
• cap (relative to the height of capital letters)
• ic (relative to the width of ideographic characters)
• lh (relative to the line-height of the element)
• rlh (relative to the root line-height)