Inline-block is a handy CSS display mode for items that should sit in a row without giving up useful box controls. An inline element normally flows with text and ignores width and height; `display: inline-block` keeps that inline flow while allowing those block-related properties to work. section 9.2
For page layout, let elements follow their normal vertical flow until a few need to appear side by side. Give those elements `display: inline-block`; they then line up left to right in the default inline direction. Unlike float-based layouts, this approach does not require clearing elements afterward. section 11.22 section 11.23
header {
border: 1px solid black;
padding: .5em 0 .1em 1em;
}
h1 {
display: inline-block; #1
padding-left: .5em;
font-size: 2.5em;
}
Applying `display: inline-block` to the heading lets it share the header row with the logo image, which is already an inline block by default. section 11.24 section 11.25
A simple inline-block layout follows a small recipe:
- Keep the ordinary page structure and default flow for elements that do not need to share a row. section 11.32
- Set `display: inline-block` on the elements that should sit beside one another, such as navigation items or content columns. section 11.26 section 11.28
- Give columns widths when their sizes matter, and use `vertical-align: top` when the sidebar should begin at the top of the row. section 11.28
- Remove whitespace between adjacent inline-block column elements when that rendered space would disrupt percentage-width calculations. section 11.29
A header, navigation row, and two columns
A Holy-Grail-style page uses inline blocks three times: logo beside title, navigation items beside one another, and an `article` beside an `aside`. The article and aside can use widths of 75% and 25%, but whitespace between their HTML tags can add unwanted rendered space. Inline blocks avoid float clearing, although unequal column content can still leave bottom borders unaligned. section 11.23 section 11.29
Inline blocks are useful for understanding and maintaining legacy layouts and for small components. For broader modern page layouts, flexbox is the recommended direction rather than relying on floats or inline blocks. section 11.2
