Block vs. Inline

All HTML elements are either block or inline elements by default.

  • Block - elements that create blocks of content (paragraphs or divs). They start new lines of text and can contain other blocks or inlines elements. Takes up the full width available with a new line before and after. Block elements: H1, OL, UL, PRE, P, DIV, BLOCKQUOTE, TABLE
  • Inline - elements that define text. Contain other inline tags and text, and do not start new lines. Inline elements: A, EM, IMG, INPUT, SPAN, STRONG, BR

Note: We can NOT set the width or the height of an inline element because the width is determined by the container box. IE incorrectly applies some width and height properties to inline elements (not standards compliant). To set width or height of an inline element, apply it to the block-level element containing the inline element. Inline elements only take up as much width as it needs. Inline elements do not force a new line.

We can change the display type with the display: style rule. We can set the display to block or inline as follows.

CSS Rule Description
display: block; Changes to block element
display: inline; Changes to inline element

We can change an inline element to a block element, or vice versa. In the following example, we will change a block level list to inline so that new lines are not added between each list item to create a horizontal menu.

This unordered list:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">FAQs</a></li>
</ul>

Looks like this...

We can change the UL tag and make it display as an inline tag...

If we add a toolbar class:

.toolbar li {
    display: inline;
    background-color: #ddd;
    border:1px solid black;
    margin:0;
    padding:0.5em;
}

And, apply the toolbar class to the UL tag:

<ul class="toolbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">FAQs</a></li>
</ul>

We get this...