Cascading Style Sheets/Display
From WikiKnowledge
The display property is used to change how an element in HTML or XHTML is displayed. With an XML document it specifies how to display an element. A web browser will automatically know how to display a HTML/XHTML element, for example a <h1> element will be displayed as a block element, however for XML document the browser will not know how to display the elements and so will need to told. Values for the display property are:
| Value | Version | Effect |
|---|---|---|
| inline | CSS 1 | Display inline. |
| block | CSS 1 | Display as a block. |
| list-item | CSS 1 | Display as a list-item (<li>) |
| run-in | CSS 2 | A run-in element is displayed as the first inline element of the next block box. If the next element is an inline element, the run-in element is displayed as a block element. |
| inline-block | CSS 2.1 | The element is displayed inline, but behaves like a block. |
| table | CSS 2 | Display as a table. |
| inline-table | CSS 2 | Same as a table, but displayed inline like inline-block. |
| table-row-group | CSS 2 | |
| table-header-group | CSS 2 | |
| table-footer-group | CSS 2 | |
| table-row | CSS 2 | Same as the HTML <tr> element. |
| table-column-group | CSS 2 | |
| table-column | CSS 2 | |
| table-cell | CSS 2 | Same as the HTML <td> element. |
| table-caption | CSS 2 | |
| compact | CSS 2, removed in CSS 2.1 | |
| marker | CSS 2, removed in CSS 2.1 | Only used with the :before and :after pseudo-elements. |
| ruby | CSS 3 | |
| ruby-base | CSS 3 | |
| ruby-text | CSS 3 | |
| ruby-base-container | CSS 3 | |
| ruby-text-container | CSS 3 | |
| none | CSS 1 | Do not display this element. |
| inherit | CSS 2 | Inherit this setting. |
Contents |
[edit] inline
- Introduced: CSS 1
An inline element will behave like a span element. It is able to appear in the normal flow of text. For example, you might want to change the color of a single word in a sentence. This can be done using this HTML:
<span style="color:red;">The</span> color of the first word is red.
Obviously you still want the word to appear in the sentence as normal. This is what display:inline does, and is the default behavior for a span element.
[edit] block
- Introduced: CSS 1
A block element will behave like a div element. It will appear on a line by itself and will take up all the horizontal space available (unless told to do otherwise).
| HTML | Example |
|---|---|
| This is an <div>example</div> sentence to show what display: block does. | This is an example sentence to show what display: block does.
|
In the above example, the word example has been placed inside a div element. Div elements are by default block level elements. You can see how the word example now takes up an entire line by its self as if there were a <br> tag before and after the word.
[edit] inline-block
- Introduced: CSS 2
The element is displayed inline, but behaves like a block. This setting has poor support in browsers, it is supported by Opera and Safari. Firefox supports this as -moz-inline-box and -moz-inline-block, however both are buggy [1]. Internet Explorer 6 will support this when applied to an inline element such as <span>, however block elements such as <div> will continue to be displayed as a block. Here is an example which will turn all span elements into inline-blocks or a -moz-inline-box in Firefox:
span {
display:-moz-inline-box;
display:inline-block;
}
[edit] inline-block in Internet Explorer 6
As said above, Internet Explorer 6 will apply this setting to inline elements, but block elements will continue to be displayed as a block. This can be fixed by applying two different rules to block elements. Here is the code to turn all div elements into inline-block elements:
div{display: inline-block;}
div{display: inline;}
This will cause all div elements to be inline-block elements in Internet Explorer 6, however they will be inline elements in other browsers.
[edit] inline-table
- Introduced: CSS 2
Displays a table, however the table is inline similar to an inline-block.
[edit] none
- Introduced: CSS 1
Any element given a display of none will not be displayed nor will any of its containing elements. This setting cannot be overridden on any child elements.
<div style="display:none;"> <div style="display:block">Some text</div> </div>
Even though the div containing "Some text" has a display of block, it will still not be shown as the containing div has a display of none.
