Inline And Block Differences
Introduction
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 and with example of all three.
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> |
A more definitive collection inline and block HTML 4 elements can be found in the references below.
Further Reading & Resources
Below are resources I used for this article and would be interesting further reading on the subject.
- Block vs. Inline
-
We start off gently with a comparison between the concepts of block and inline in HTML and CSS, respectively. In part 2 we'll look at the block box model, which is fairly well known by now, and the thrilling finale in part 3 deals with the esoteric details of inline boxes.
http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1
- Building Blocks With CSS
-
Every child plays with blocks at some point. It's fun to stack them, line them up, build houses, etc. Many Web designers take that early love of blocks and apply it to Web page design using style sheets. It's pretty easy — if you understand the difference between a block-level and inline element.
- The Display Declaration
-
The display property lets you define how a certain HTML element should be displayed.
- HTML 4.0 Block-Level Elements
-
The following are defined as block-level elements in HTML 4.0:
- HTML 4.0 Inline Elements
-
The following are defined as inline elements in HTML 4.0: