Block Properties of Cascading Style Sheets (CSS)

tags (both with and without positions specified), tags using the display:block style, and images or paragraphs set with absolute or relative positions.

word-spacing: To adjust the spacing between individual words, use any positive or negative number in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), such as word-spacing: 2px;.

p { word-spacing: 2px; }

letter-spacing: With this attribute, you can uniformly increase or decrease the space between characters by specifying a positive or negative value in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), such as letter-spacing:1em;. Note that changing the letter-spacing attribute overrides any preexisting text justification.

p { letter-spacing: 1.5em; }

vertical-align: You can vertically align text along the text baseline, sub (subscript), super (superscript), top, text-top, middle, bottom, and text-bottom, or by any value, positive or negative, in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), such as vertical-align: top;.

p { vertical-align: top; }

text-align: This option can be applied only to text. Alignment options include left, right, center, or justify.

p { text-align: center; }

text-indent: Also to be used only with text, this style rule creates a first-line indent that can be set to any positive or negative value in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), such as text-indent:12px;.

To indent nontext objects on a page, it is no longer recommended that you use the

tag, because this tag has been deprecated. Instead, add an indent using margin and/or padding style attributes.

p { text-indent: 10px; }

white-space: White space inside or around text in any block-level element can be displayed in three different ways: normal, pre, and nowrap. Choose normal to ignore any white space, pre to leave the white space in with the text as it was coded, or nowrap to force any text to wrap only if the code has line break (
) tags.

p { white-space: pre; }

display: This attribute controls how the styled object displays in the browser. Value options are block, compact, inline, list-item, marker, none, run-in, and table.

p { display: none; }

Choose from any of the following settings:

• none: Use this option to hide a styled element from displaying in the browser. This option is extremely useful when creating multiple style sheets so that some elements can be hidden from view on one device but not another, as with a secondary CSS for the print media type.

• inline: Use this option to display the object styled inline with other elements, often in the same block, as with making list items display in a single row.

• block: This turns any styled element into a block, after which further block-styling attributes may be applied. Block-level elements take up the full width of available space, including line space above and below the element, similar to the way paragraphs have space above and below them.

• list-item: This option converts styled text into an unbulleted list, similar to

  and
  tags.

  1. run-in: This feature is either unsupported, incompletely supported, or fully supported, depending on the browser. Currently the browsers that provide full support include Safari, Chrome, IE 8+, and Opera 5+. Add the run-in attribute to force a block box following a run-in box to become an inline box of the block box.

     One interesting usage is to make a header’s baseline share the same baseline as the first line of a following block of paragraph text.

  2. inline-block: Use this option to make a block behave as an inline block with a specified width.

  3. compact: This option is a still quite buggy and is currently only haphazardly supported. In fact, it may already be deprecated, but that cannot be confirmed at this time. When specified, this attribute forces other blocks in the code after it to display along its side.

  4. marker: This converts content in a display block into a marker box, using the :before or :after pseudo-element, inside which you can further style the content.

  5. table: Use this attribute to display elements inside a table without having to use HTML tables. In theory, any nested elements would display as if they were table-row and table-cell elements. Additional display table values for this property are inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption.

     This property is now supported in all major browsers including IE 9+ and IE 8, but only in IE 8 when is not present.

  6. inherit: When you specify this option, the styled object inherits the display value from its parent element.

  Blocks are one of the property categories that have a lot of capabilities beyond the basic ones described here. Not all properties are consistently supported by all browsers, but depending on the target audience, some of them might be perfectly suited for a particular web project. To find out more about display properties, review the block information pages at the W3C website.