CSS Logical Sizing

CSS Logical Properties replaces physical directions like left and top with flow-relative directions like inline-start and block-start. This topic extends that same idea to two more areas: positioning an element with inset instead of separate top/right/bottom/left declarations, and sizing a box with block/inline-aware minimum and maximum dimensions instead of physical width and height limits.

In this page:

Positioning with the inset Shorthand
Axis-Specific Positioning with inset-block and inset-inline
Capping and Flooring Height with max-block-size and min-block-size
Preventing Overly Narrow Content with min-inline-size
Flow-Relative Margins with margin-block Variants

Positioning with the inset Shorthand

inset is the logical shorthand equivalent of setting top, right, bottom, and left all at once -- inset: 0 pins a positioned element to fill its containing block exactly, identical in effect to writing all four physical properties individually. It requires the element to have position set to relative, absolute, fixed, or sticky, just like the physical offsets do.

Note: Use inset: 0 as a quick, readable way to make an absolutely positioned overlay fill its entire parent container.

Warning: inset has no effect at all on an element with the default position: static, exactly like top and left would have no effect either.

Example: Positioning with the inset Shorthand

css

<style>
.container {
  position: relative;
  width: 200px;
  height: 100px;
  background: #eee;
  border: 2px dashed #999;
}
.overlay {
  position: absolute;
  inset: 0;
  background: dodgerblue;
  color: white;
}
</style>
<div class="container">
  <div class="overlay">Fills the parent exactly</div>
</div>

Axis-Specific Positioning with inset-block and inset-inline

inset-block sets the start and end offsets along the block axis (top and bottom by default), while inset-inline sets the offsets along the inline axis (left and right by default). Splitting inset into these two axis-specific pairs is useful when you only want to control positioning along one flow direction and leave the other axis untouched.

Note: Use inset-inline: 0 alone to stretch an element edge-to-edge horizontally while leaving its vertical position controlled separately.

Warning: Like the full inset shorthand, both inset-block and inset-inline require position to be set to something other than static to take effect.

Example: Axis-Specific Positioning with inset-block and inset-inline

css

<style>
.box {
  position: absolute;
  inset-inline: 0;
  background: crimson;
  color: white;
  padding: 8px;
}
</style>
<div style="position: relative; background: #eee; min-height: 60px;">
  <div class="box">Stretched edge-to-edge horizontally only</div>
</div>

Capping and Flooring Height with max-block-size and min-block-size

max-block-size and min-block-size are the logical equivalents of max-height and min-height, capping or flooring an element's size along the flow-relative block axis rather than the physical vertical axis. In the default horizontal writing mode they behave exactly like their physical counterparts, but they automatically flip to control width instead if the writing mode changes to vertical.

Note: Prefer max-block-size and min-block-size over max-height and min-height in components meant to support vertical writing modes, like Japanese-language sites.

Warning: In the default left-to-right horizontal writing mode, max-block-size and max-height are functionally identical, so the difference is invisible until writing-mode changes.

Example: Capping and Flooring Height with max-block-size and min-block-size

css

<style>
.card {
  min-block-size: 100px;
  max-block-size: 200px;
  background: lightyellow;
  border: 2px solid #cc9900;
  padding: 10px;
}
</style>
<div class="card">Height capped and floored along the block axis</div>

Preventing Overly Narrow Content with min-inline-size

min-inline-size is the logical equivalent of min-width, preventing an element from shrinking narrower than a given size along the flow-relative inline axis. It is especially useful inside flexible layouts like flexbox or grid, where items can otherwise shrink to the point of clipping their own content or icons.

Note: Set min-inline-size on flex items containing icons or short labels so they never shrink small enough to visually break in a cramped flex row.

Warning: Without min-inline-size (or physical min-width), flex items default to a min-content-based floor that can still let text or icons overlap awkwardly.

Example: Preventing Overly Narrow Content with min-inline-size

css

<style>
.container {
  display: flex;
  gap: 8px;
}
.icon-label {
  min-inline-size: 80px;
  background: steelblue;
  color: white;
  padding: 8px;
}
.container > div:not(.icon-label) {
  background: #ddd;
  padding: 8px;
}
</style>
<div class="container">
  <div class="icon-label">Icon</div>
  <div>Other content</div>
</div>

Flow-Relative Margins with margin-block Variants

margin-block sets the start and end margins along the block axis in one declaration, while margin-block-start and margin-block-end target just one side individually -- the logical equivalents of margin-top and margin-bottom. Together with the margin-inline family already used for left/right spacing, this completes a fully writing-mode-aware margin system.

Note: Use margin-block-start and margin-block-end instead of margin-top and margin-bottom in any component intended to support right-to-left or vertical writing modes.

Warning: margin-block sets both the start and end margin to the same value in one go; use the individual margin-block-start or margin-block-end if the two sides need different values.

Example: Flow-Relative Margins with margin-block Variants

css

<style>
.box {
  margin-block: 20px;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
.box2 {
  margin-block-start: 10px;
  margin-block-end: 30px;
  background: lightblue;
  border: 1px solid #99c;
  padding: 8px;
}
</style>
<div class="box">Same top and bottom margin</div>
<div class="box2">Different top and bottom margin</div>

Common Mistakes

Mixing inset with individual top/left declarations on the same element, which can create confusing, hard-to-predict overrides.
Assuming min-inline-size always means a minimum horizontal size, when it flips to vertical automatically in a vertical writing mode.
Forgetting that inset requires position to be set to something other than static, exactly like the physical top/right/bottom/left properties do.

Chapter Summary

inset is the logical shorthand for top, right, bottom, and left combined, with inset-block and inset-inline offering axis-specific control.
max-block-size and min-block-size cap and floor an element's size along the flow-relative block axis instead of physical height.
min-inline-size guards against content on the flow-relative inline axis shrinking too far, mirroring the physical min-width property.

Browser Support

inset and margin-block/-inline logical sizing properties are supported in all modern browsers; always test writing-mode: vertical-rl pages specifically, since that is where logical and physical axes actually diverge.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Logical Properties Next Lesson → CSS Writing Modes