CHAPTER 11 ■ SPACING CONTENTBlocked
Problem You want to style text as a block. For example, you want to move an inline element to the
next line, give it vertical margins, and indent its first line. Or, you want to use an element in
your markup, such as , , or , that can contain only inline elements,
and you want to display some or all of these inline elements as blocks.
Solution You can display any inline element as a block. This moves the element to a new line and
makes it possible for block properties to work properly. This means text-indent, text-
align, margin, border, padding, width, and height work like they do on block elements. If
an inline element were not displayed as a block, these properties would have no effect, or
they would work differently. This design pattern is the converse of Inlined, which displays
block elements as inline elements.
HTML Wrap the text that you want to be indented in a span or other inline element and assign it to
a class or ID of your choosing.
CSS Apply styles to your chosen class or ID as follows:
Use display:block to display the inline element as a block.
Optionally apply text-indent, text-align, margin, border, padding, width, and height to
format the inline element as if it were a block element.
Pattern^
HTML
.indent { display:block;
text-indent:±VALUE;
text-align: LEFT_CENTER_RIGHT;
margin: ±VALUE;
border: WIDTH STYLE COLOR;
padding: +VALUE;
width: +VALUE;
height: +VALUE; }CSS
Location This pattern works anywhere you can use an inline element.
Tip In spite of its simplicity, this is one of the most powerful design patterns. It allows you to
combine the semantic meaning of inline elements with the styling features of block
elements. In other words, you can feel free to tag elements based on their semantic meaning
without sacrificing style.
Related to Code, Padded Content, Line Break, Inline Horizontal Rule; Block Box, Display (Chapter 4);
Inlined (Chapter 13); Image, Image Map, Content Over Image (Chapter 14); Tabled, Rowed,
and Celled (Chapter 15); Outside-In Box, Opposing Floats, Tab Menu, Layout Links (Chapter
17); Center Callout, Block Quote, Inline Block Quote (Chapter 19)