CHAPTER 13 ■ BLOCKSInlined
Problem You want the browser to render a block element as if it were an inline element. In other
words, you want a block element to be displayed inline.
Solution CSS provides display:inline for this purpose. You can assign this rule to any element to
display it inline. Since margin and padding work differently inline, you often need to adjust
the margin and padding to work inline. This is particularly true for lists displayed inline.
Since height does not work inline, you can use line-height in its place.
Pattern SELECTOR { display:inline; line-height:+VALUE;^
margin:±VALUE; padding:+VALUE; }
Location This pattern applies to any type of element.
Limitations List items lose their bullets and numbers when inlined. Version 8+ of Google Chrome
requires tables use inline-table to render a table inline.
Advantages Inlining a block element allows it to be rendered from left to right (or right to left in some
languages) and wrapped to additional lines as needed. This is the most compact way to
display elements.
Tips Rendering a table inline can be useful when you have a few rows of tabular data that you
want to flow along with other inline content. The table retains its internal structure of rows
and columns, but is located in the inline formatting context. A table rendered inline is very
similar to an inline block: both are rendered as blocks within an inline formatting context.
When a parent block is inlined, its child blocks must be inlined too, or they will break out of
the inline formatting context and create new block formatting contexts. For example, list
elements need to be inlined along with their list container. (This does not apply to rows and
cells of inlined tables.)
Example The first division in the example contains a paragraph, a table containing two rows of cells,
and a list containing two list items. The second division contains the same elements, but
each element is inlined.
Related to Run-In; Display, Inline Box, Inline-Block Box (Chapter 4); Blocked (Chapter 11); Tabled,
Rowed, and Celled (Chapter 15); Flyout Menu (Chapter 17); Hanging Alert, Run-In Alert
(Chapter 20)