The Differences Between Inline And Block Elements

20.06.2005

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.

Example Inline, Block & Replaced Elements

Block-level	Inline	Replaced
<p>	<a>	<img>
<table>	<abbr>	<select>
<div>	<span>	<textarea>
<h1>	<em>	<input>

3 Comments to "The Differences Between Inline And Block Elements"

1 Martin Gwosdz 2 weeks, 3 days later.

Thanks for explaining the differences. Although I’ve been playing with CSS for a long time, the details (block == width: 100%) haven’t been obvious to me.

Unfortunately the table at the end lacks explaination: What are ‘replaced elements’ and what should one know about them?
2 krisleslie 3 weeks, 4 days later.

Look at what he said for block level in the table. Think about really a black block on a white page. A table is a “black block” and paragrah and a div are blocks! H1-h6 are blocks if you made a custom rule to make it black around a h1-h6 header you would see it render a black box or block! if you rendered a inline inside a block think maybe the color red. If you add the element it would be a black box with a red LINE! in it.

Take a sheet a of paper cut out a block and a line put them together! You will visually see the difference. Then take them on put them on top of each other that is a FLOAT!
3 Simon Chettle 5 months, 3 weeks later.

@Martin Gwosdz: A replaced element is an element for which the CSS formatter knows only the intrinsic dimensions. In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements can be examples of replaced elements.

For example, the content of the IMG element is often replaced by the image that the “src” attribute designates. CSS does not define how the intrinsic dimensions are found.

CSS Lounge