9.3 CSS Display Style
Using CSS, most HTML elements can be displayed in one of 3 basic ways:
Understanding the difference between the first two options is a major key to understanding CSS display, and can certainly prevent hours of headbanging when designing web pages. Almost all HTML elements are either block or inline elements and so are naturally displayed inline or block (or even not at all). And all of these default "factory settings" can be overwritten in CSS if and when required using the property display: followed by one of the three values above (block/inline/none).
Block Elements
The characteristics of block elements include:
- They always begin on a new line;
- Height, line-height and top and bottom margins can be manipulated;
- Element width defaults to 100% of the containing element unless a different width is specified.
| Natural Block display elements include: | |
|---|---|
| <div> | The general purpose container box |
| <h1-h6> | All headings |
| <p> | Paragraph text |
| <ul>,<ol>,<dl> | Lists (unordered, ordered and definition) |
| <li>,<dt>,<dd> | List items (including definition list terms and definition list definitions) |
| <table> | Tables (much like this one) |
| <form> | Input forms |
| <blockquote> | For quoting passages of text |
| <pre> | For preformatted code (like in our examples) |
Inline Elements
The characteristics of block elements include:
- They begin on the same line;
- Height, line-height and top and bottom margins cannot be changed;
- Element width is as long as the text/image and cannot be manipulated.
| Natural Inline display elements include: | |
|---|---|
| <span> | An all-purpose inline element |
| <a> | Anchor tag |
| <strong> | Adds "strength" to text - useful for SEO |
| <em> | Adds emphasis to text |
| <img> | For inserting images into web pages |
| <label> | For controlling forms |
| <br> | Break tag. Oddly an inline element that forces new lines |
None
Some elements have a default display of none.
| Natural not displayed elements include: | |
|---|---|
| <meta> | Usually included in the head section anyway to add information about a site |
| <style> | Deprecated as this is now added to a stylesheet |
Being able to change the default display style of HTML elements is a very powerful and useful technique. For example, it can be used for:
- Making an inline element start on a new line;
- Making a block element start on the same line;
- Controlling the width of an inline element (useful in navigation links);
- Manipulating the height of an inline element;
- Setting a background colour as wide as the text for block elements without having to specify a width;
- Fixing IE bugs.
Overflow
Now we have covered display, and with the box model in mind, there can be occasions where content may overflows a conaining element's box. This overflow can be controlled using the overflow property. This specifies what happens if the content does overflow an element's box. There are five possible values:
| Value | Description |
|---|---|
| visible | Any overflow is not clipped and renders outside the element's box (default) |
| hidden | Any overflow is clipped and the rest of the content will be invisible |
| scroll | Any overflow is clipped but a scroll-bar is added to view the rest of the content |
| auto | If overflow is clipped, a scroll-bar should be added to see the rest of the content |
| inherit | Specifies that the value of the overflow property should be inherited from the parent element |