.jpg)
.jpg)
.jpg)
NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.
CSS Display
The display property controls the type of box an element generates.
The computed value may differ from the specified value for the root element and for floated or absolutely positioned elements; see The Relationship Between display, position, and float for details about the relationship between the display, float, and position properties.
Note that a user agent style sheet may override the initial value of inline for some elements.
Syntax
display: { block | inline | inline-block | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | none | inherit } ;
- none
- A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.
- block
- The element is displayed as a block element or a box (like paragraphs and headers). A block element has some whitespace above and below it and does not tolerate any HTML elements next to it
- inline
- This is default. The element is displayed as an inline element (like span). An inline element has no line break before or after it, and it tolerates HTML elements next to it. The element generate one or more inline boxes.
- inline-block
- The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element. The element generates a block box that is laid out as if it were an inline box.
- inline-table
- The element is displayed as an inline table and the element behaves like a table is laid out as an inline box.
- list-item
- The element is displayed as a list-item, which means that it has a bullet in front of it. The element generate a principal block box and a list-item inline box for the list marker.
- run-in
- Used to allow a header to run into text below it, without sacrificing semantics. A value of run-in makes the element generate either a block box or an inline box, depending on the context. If the run-in box doesn’t contain a block box, and is followed by a sibling block box (except a table caption) in the normal flow that isn’t, and doesn’t contain, a run-in box, the run-in box becomes the first inline box of the sibling block box. Otherwise, the run-in box becomes a block box.
- table
- The element is displayed and behaves as a table
- table-caption
- The element is displayed and behaves as a table caption
- table-cell
- The element is displayed and behaves as a table cell.
- table-column
- The element is displayed and behaves as a table column.
- table-column-group
- The element is displayed and behaves as a table column group (like <colgroup>).
- table-footer-group
- The element is displayed as a table footer row group and makes the element behave like a table footer row group.
- table-header-group
- The element is displayed and behaves as a table header row group.
- table-row
- The element is displayed and behaves as a table row.
- table-row-group
- The element is displayed as a table row group. The element behaves like a table body row group.
- inherit
- The value of the display property will be inherited from the parent element
h3 {
display: run-in;
}
Example
The following rule will cause a elements that are descendants of the .menu element to render as block elements instead of inline elements:
.menu a { display: block; }
Page last updated: June 08, 2012 13:42 PM
Content and Navigation...