display

The display property controls if/how html elements are displayed.

Elements such as divisions, headings and paragraphs are usually block elements – they start on a new line and takes up the whole of their container.

Elements such as spans, images and hyperlinks are usually inline elements – they only take up as much width as they need, and are displayed alongside other elements.

display: none;

1
2
3
img#banner {
    display: none;
}

The element will not be hidden, and the rest of the page displayed as if the element was not there.

display: block;

1
2
3
a.linkslist {
    display: block;
}

This will make a normally inline element behave as a block element.

Example: Displaying several hyperlinks on separate lines

display: inline;

1
2
3
li.navigationbar {
    display: inline;
}

This will make a normally block element behave as a inline element.

Example: making inline <li> elements for horizontal menus: