trovster.com

The personal website of Trevor Morris

Differences Between Inline & Block Elements

There are three types of display categories that HTML elements use when using CSS. These categories are named block, inline and replaced. This article discusses the main differences between inline and block elements, with examples of each.

The HTML Difference

All browsers apply a default styling to HTML elements. Block elements are rendered with one main difference compared with inline elements. Block elements generally start a new line where inline elements do not.

Most block elements can contain any element, block or inline, but there are a few exceptions. The <body> and <forms> can only contain other block elements. Another exception is the block element <p>, for a paragraph, which can only contain inline elements.

Inline elements can only contain other inline elements.

The CSS Difference

You can set the display category of elements using CSS. There are three main values for the display property. These are:

element {
  display: inline;
  display: block;
  display: none;
}

An important note to remember is that changing the CSS property doesn’t alter the HTML rules discussed above. This purely changes the presentation of the element, not what the element is.

When an element has the CSS rule display: block; it stacks vertically, just like building blocks. The left edge of the box generated touches the left each of its container and the same with the right. An element that has display: block; takes up the available horizontal space.

Block elements have collapsible vertical margins when no padding or border is between them. A good example of this is margins on paragraphs; although they might have a top and bottom border of 10px, totalling 20px between them, the generated margin is only 10px. This is because the margins have collapsed to generate the expected visual output.

Inline elements take up the required width of their content. They may have borders as well as horizontal margins and padding. However, vertical padding and margins are ignored along with height and width.