Introduction to CSS3 Minimum content size (min-content size) and maximum content size (max-content size)

CSS Sizing LEVEL3 specification, and layout size related content, often appear min-content size and max-content size and other terms.

This needs to be divided into two categories: one is related to block elements, and one is related to inline elements.

1. Min-content Inline size

The minimum content in-line dimension means that when the soft (i.e., non-hard-to-specify) inclusion technique is used as much as possible (such as wrapping), it contains the element content without overflow dimensions.

2. Max-content Inline size

Unlike the min-content inline size, the maximum content-in-line dimension means that in a single line (unless hard line wrapping is used) the element content is included without overflow in the row size without using any soft-inclusion technology.

3. Max-content block size and min-content block size

For block elements, the two are identical.

4. Max-content Contribution and Min-content contribution

Maximum content contribution and minimum content contribution correspond to max-content, min-content size,

On top of this, you also need to calculate the dimensions of the inward margin (margin/padding) and the boundary (border).

Understanding these terms is helpful for mastering the newly introduced grid layout of CSS3 and for flexible layout techniques.

Try it yourself with an intuitive impression.

by Iefreer

Introduction to CSS3 Minimum content size (min-content size) and maximum content size (max-content size)