The block-size property sets the size of an element along the block axis. In a horizontal writing mode it behaves like height. In a vertical writing mode it behaves like width.
It is not inherited. The initial value is auto. Pair it with inline-size for the other axis, and with writing-mode when text direction changes.
Standard-track and Baseline Widely available. Prefer block-size over height when a layout must stay correct for both horizontal and vertical writing modes. fit-content() is experimental here; stretch has limited support.
block-size: auto | <length> | <percentage> | min-content | max-content | fit-content | initial | inherit;Values match width / height. Newer keywords like stretch have limited support.
| Value | Description | Try it |
|---|---|---|
auto | Default. Browser sizes the box from content | Try it |
<length> | Fixed size such as 150px, 12rem, or 40vh | Try it |
<percentage> | Percent of the containing block’s block size | Try it |
with writing-mode | In vertical mode, block-size maps to physical width | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s block-size | Try it |
block-sizeThink in writing-mode terms: size the block axis, not “always top–bottom.”
block-size where you would reach for height in a horizontal layout.auto, a length, or a percentage of the containing block.min-block-size / max-block-size when you need floors or caps.writing-mode if the page may switch to vertical text.| Piece | Required? | Role |
|---|---|---|
| Block or sized box | Yes | Same applicability rules as height |
block-size value | Yes | auto, length, percentage, or keyword |
| Containing block size | For % | Percentage uses the parent’s block size |
writing-mode | Optional | Chooses whether block maps to height or width |
Change block-size on the sample box. In the default horizontal mode, this acts like height.
Each snippet focuses on block-size. Use Try It Yourself for a live editor.
Set an exact block size. In horizontal mode this is like height.
<style>
div {
block-size: 150px;
}
</style>
<div>150px block</div>150px sets the block-axis size.rem, em, or vh the same way.Size a child as half of the parent’s block size.
<style>
.parent {
block-size: 220px;
}
.child {
block-size: 50%;
}
</style>
<div class="parent">
<div class="child">Half of parent</div>
</div>220px defines the containing block.50% resolves to 110px here.height: 50%.With vertical text, block-size maps to physical width.
<style>
div {
writing-mode: vertical-rl;
block-size: 150px;
}
</style>
<div>Block axis</div>writing-mode: vertical-rl rotates the axes.150px controls physical width, not height.Most confusion comes from mixing logical and physical sizing.
In vertical writing modes, block-size maps to width. Do not assume it always means top–bottom size.
Setting both height and block-size on the same element can produce unexpected results. Prefer one system.
Percentages resolve against the containing block’s block size. If the parent’s block size is auto, the percent often computes to auto — the same trap as height: %.
min- / max-block-size overrideThose properties can stop a box from shrinking or growing past a limit, just like min-height / max-height.
box-sizing still appliesWith border-box, padding and border count inside the size. With content-box, they add outside it.
block-size is a browser layout property. Node.js, Deno, and Bun do not apply it.
Chrome 57+, Firefox 41+, Safari 12.1+, Edge 79+, Opera 44+, Samsung Internet 7+. Same value set as width/height; stretch and fit-content() remain limited or experimental.
Bottom line: Safe for modern sites. Prefer logical sizing when writing-mode flexibility matters. Skip Internet Explorer. Treat fit-content() as experimental and stretch as limited.
auto, lengths, and percentages (same as height).auto. Not inherited.inline-size for fully logical box sizing.One line: block-size is the logical version of height — it follows the writing mode’s block axis.
Learn the shorthand that sets border width, style, and color together.
5 people found this page helpful