Intrinsic Sizing, Aspect Ratio and Centering

What Is It?

Intrinsic sizing lets content influence dimensions. Aspect ratio supplies a preferred width-to-height relationship while automatic dimensions remain flexible.

Properties, Tags and Attributes Explained

• min-content: Uses the smallest intrinsic width, commonly determined by the longest unbreakable segment.
• max-content: Uses the intrinsic width without optional soft wrapping.
• fit-content: Sizes between intrinsic limits subject to available space.
• aspect-ratio: Sets a preferred ratio, such as 16 / 9.
• margin-inline: auto: Centers a constrained block along the inline axis in ordinary block layout.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Fit a label

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intrinsic Sizing, Aspect Ratio and Centering</title>
  <style>
    .demo { width: fit-content; max-width: 100%; padding: 12px; background: #dbeafe; margin-inline: auto; }
  </style>
</head>
<body>
  <div class="demo">Content-sized label</div>
</body>
</html>

What you see: The label sizes to its content and is centered in available space.

Example 2: Preserve a ratio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intrinsic Sizing, Aspect Ratio and Centering</title>
  <style>
    .demo { width: min(100%, 320px); aspect-ratio: 16 / 9; display: grid; place-items: center; background: #e0e7ff; }
  </style>
</head>
<body>
  <div class="demo">16 : 9 media frame</div>
</body>
</html>

What you see: The height follows the available width using a 16-to-9 ratio.

Example 3: Intrinsic minimum

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intrinsic Sizing, Aspect Ratio and Centering</title>
  <style>
    .demo { width: min-content; background: #fef3c7; padding: 12px; }
  </style>
</head>
<body>
  <div class="demo">CSS makes layouts flexible</div>
</body>
</html>

What you see: The box wraps words and sizes to its longest word plus padding.

When and Where to Use It

Use fit-content for compact controls, aspect-ratio for media placeholders, and auto margins for constrained reading panels.

Common Mistake or Useful Tip

If both width and height are definite, aspect-ratio does not normally determine either dimension.

Try It Yourself

Set a definite height on the ratio frame and compare its shape.