CSS
Block vs. inline level elements
Block vs. inline level elements
Almost all HTML elements are either block or inline elements. The characteristics of block elements include:
- Always begin on a new line
- Height, line-height and top and bottom margins can be manipulated
- Width defaults to 100% of their containing element, unless a width is specified
Examples of block elements include <div>
, <p>
, <h1>
, <form>
, <ul>
and <li>
. Inline elements on the other hand have the opposite characteristics:
- Begin on the same line
- Height, line-height and top and bottom margins can't be changed
- Width is as long as the text/image and can't be manipulated
Examples of inline elements include <span>
, <a>
, <label>
, <input>
, <img>
, <strong>
and<em>
.
To change an element's status you can use display: inline
or display: block
. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to:
- Have an inline element start on a new line
- Have a block element start on the same line
- Control the width of an inline element (particularly useful for navigation links)
- Manipulate the height of an inline element
- Set a background colour as wide as the text for block elements, without having to specify a width