vb
A hundredth of the viewport along the block axis, the direction lines stack in.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 108+ |
| Chrome Android | 108+ |
| Edge | 108+ |
| Firefox | 101+ |
| Firefox Android | 101+ |
| Safari | 15.4+ |
| Safari iOS | 15.4+ |
Formula 1vb = 1/100 of the viewport size in the block direction
How it works
1vb is 1% of the viewport along the block axis, the direction in which lines stack. In horizontal text that is the height, so vb equals vh: 80px per 10 at a window height of 800px. Being the plain, default unit, like vh it follows the large viewport and brings the toolbar behavior of vh along unchanged.
What vb buys is a layout that survives a switch to vertical text. A panel written as min-block-size: 100vb stays as large as the window in the direction its lines stack when the text turns, where 100vh would stay tied to the screen’s height.
Which element’s writing mode counts is where the documents disagree with each other and Chromium takes the side of the box. See vi for the measurement. The disagreement affects pages that mix horizontal and vertical text and is invisible on all others.
Try it
Viewport units for a window of your choice
Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.
10vw- 128px
10vh- 80px
10vmin- 80px
10vmax- 128px
On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.
The same as a table
| Unit | Laptop, 1280 by 800 | Phone, 390 by 844 |
|---|---|---|
10vw | 128px | 39px |
10vh | 80px | 84.4px |
10vmin | 80px | 39px |
10vmax | 128px | 84.4px |
What changes it
- Moves with
- the window size
- the writing mode
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
Reach for it when
Panels and rails sized along the flow direction, for pages that may switch to vertical text.
Watch out
In horizontal writing it equals vh, so mistakes stay hidden until a page switches to vertical text. Like vh it follows the large viewport, so toolbars can cover its end. Whose writing-mode picks the axis is the question described under vi: the root's in MDN, the element's in the definition and in all three engines measured there.
.rail {
block-size: 100vb;
}