CP Blogs

Block vs. inline level elements

Nearly all HTML elements are either block or inline elements. So what the characteristics of block elements? Well they include:

1. Always begin on a new line
2. Height, line-height and top and bottom margins can be manipulated
3. 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:

1. Begin on the same line
2. Height, line-height and top and bottom margins can't be changed
3. 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>.

When changing an element's status you can use display: inline or display: block. TThis 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