The Display Property

A key trick to the manipulation of HTML elements is understanding that there's nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser's default visual representation of most HTML elements consist of varying font styles, margins, padding and, essentially, display types.

The most fundamental types of display are inline, block-line and none and they can be manipulated with the display property and the values inline, block and none.


inline does just what it says - elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline.

block puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line.

none, well, doesn't display the element, which may sound pretty useless but can be used to good effect with accessibility considerations (see Accessible Links), alternate stylesheets or advanced hover effects.


Example:

h4 {
display: inline;
font-size: 2em;
}

#blog p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}