CHAPTER 4 ■ BOX MODELSInline Box
Aliases Inline, inline element, and static inline box are synonyms with inline box.^
Problem You want to style the box of an inline element.
Solution Inline boxes are rendered in the inline flow. They flow horizontally from left to right (or right
to left in some languages) and are wrapped to new lines when they exceed the width of their
closest terminal block ancestor. This is called the inline formatting context. CSS provides
the following properties for styling inline boxes:
width, height, and overflow do not work on inline elements, because they always
shrinkwrap to fit the width and height of their content.
margin and line-height are applied to inline elements in unique ways. Horizontal margins
change the position of inline elements in the flow. A positive value in margin-left moves
the element away from the previous element, and a negative value moves it closer. A
positive value in margin-right moves the next element further away, and a negative value
moves it closer. margin-top and margin-bottom are ignored by inline elements. Instead,
inline elements use line-height to size the height of a line.
border is applied to inline elements in unique ways. Horizontal borders change the position
of inline elements in the flow. The left border moves the element to the left, and the right
border moves the next element to the right. The top and bottom borders are rendered above
and below the padding area without expanding the height of the line or changing the
vertical position of the inline element. Because borders do not affect the height of the line,
borders can overlap neighboring lines unless you increase line-height. When a bordered
element is wrapped across lines, the browser does not render the right border at the end of
the line, and it does not render the left border at the beginning of the wrapped line. The left
and right borders occur only at the beginning and end of the element.
padding is applied to inline elements in exactly the same way as borders.
Pattern INLINE_SELECTOR { display:inline; visibility:VALUE;^
line-height:+VALUE;
margin:±VALUE;
padding:+VALUE;
border:+WIDTH STYLE COLOR;
background:VALUES; }
Location This design pattern applies to inline elements and any element displayed inline.
Related to Display, Box Model; Shrinkwrapped (Chapter 5); Margin, Border, Padding, Background,
Visibility (Chapter 6)