CHAPTER 4 ■ BOX MODELSInline-Block Box
Problem You want to style the box of an inline-block element. Inline-block elements include
replaced elements and inline elements displayed as inline blocks. For example, an image is
a replaced element because the browser replaces the element with an image. Also, you can
use display:inline-block to display any inline element as a block rendered within an
inline context.
Solution Inline-block boxes participate in the inline flow like inline boxes but have margins, borders,
padding, width, and height like block boxes. An inline-block box cannot be wrapped across
lines. An inline-block box grows the height of a line to fit its height, padding, borders, and
margins. An inline-block box can be shrinkwrapped, sized, or stretched. CSS provides the
following properties for styling inline-block boxes:
width and height set the width and height of the element. You can enlarge or shrink a
replaced element, such as an image, by setting width and/or height to a measurement. You
can set a replaced element to its natural size using width:auto and height:auto. You can
size an inline-block element, such as a span assigned to display:inline-block, by setting
width and/or height to a measurement. You can shrinkwrap an inline-block element using
width:auto and height:auto. You can stretch an inline block using width:100%. Note that a
stretched inline block is the same as a block.
margin has unique inline-block features. A positive value in margin-top expands the height
of the line and a negative value shrinks it. A positive value in margin-bottom raises the
element and a negative value lowers it. margin-bottom may also expand or shrink the height
of a line. 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.
border and padding expand the outer size of the inline element. This moves it to the right
and moves following content to the right. It also moves it up and increases the height of the
line containing it.
Pattern SELECTOR { display:inline-block; line-height:+VALUE;^
overflow:VALUE; visibility:VALUE;
width: +VALUE; height: +VALUE;
margin:±VALUE; padding:+VALUE;
border:+WIDTH STYLE COLOR; background:VALUES; }
Location This design pattern applies to inline elements.
Example The example shows an image and a span displayed as inline blocks. Note that you do not
need to assign display:inline-block to replaced elements because a browser
automatically displays them as inline blocks.
Related to Display, Box Model; Width, Height, Sized, Shrinkwrapped, Stretched (Chapter 5); Margin,
Border, Padding, Background, Overflow, Visibility (Chapter 6)