How is the Height of Content-Boxes Determined for Block and Inline Elements?

Determining Height of Content-Box in Block and Inline Elements

Understanding Height of Block Elements

In block-level elements, the height of the content-box is defined by the distance from the top of the content to one of the following (depending on the presence of an inline formatting context (IFC) or block formatting context (BFC)):

1. The bottom of the last line box in an IFC
2. The bottom margin of the last in-flow child in a BFC

If the element has a height set explicitly, the height of the content-box is simply that value.

Inline Element Height

For inline elements, the height of the content-box is not explicitly defined and depends on the font size and other font properties. The vertical margin, border, and padding of an inline element start at the top and bottom of the content-box, but do not affect the height of the line box.

Example: Determining Height

In the provided HTML snippet, the height of the content-boxes are as follows:

• Paragraph (

  ): The height is equal to the line-height (2em) because it establishes an IFC with one line.

• Div (
  ): Also equal to the line-height (2em) for the same reason.
• Span (): The height varies with the line-height, indicating that the height is defined by the font properties, not the line-height.

The above is the detailed content of How is the Height of Content-Boxes Determined for Block and Inline Elements?. For more information, please follow other related articles on the PHP Chinese website!