CSS/Properties/display

From Web Education Community Group
Jump to: navigation, search

display

The display property specifies the type of box used for an element.

Description

Values inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initial value inline
Applies to All elements
Inherited No


Values

  • inline
    Causes an element to generate one or more inline boxes.


  • block
    Causes an element to generate a block box.


  • list-item
    Causes an element (e.g., LI in HTML) to generate a principal block box and a marker box.


  • run-in
    Creates either block or inline boxes, depending on context. Properties apply to run-in boxes based on their final status (inline-level or block-level).


  • inline-block
    Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.


  • table
    Behave like a <table> element.


  • inline-table
    Specifies that an element defines an inline-level table.


  • table-row-group
    Behave like a <tbody> element.


  • table-header-group
    Behave like a <thead> element.


  • table-footer-group
    Behave like a <tfoot> element.


  • table-row
    Behave like a <tr> element.


  • table-column-group
    Behave like a <colgroup> element.


  • table-column
    Behave like a <col> element.


  • table-cell
    Behave like a <td> element.


  • table-caption
    Behave like a <caption> element.


  • none
    This value causes an element to not appear in the document. It has no effect on layout.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 p {
   display: inline;
 }

[index.html]

<body>
  <p>This is a paragraph 1.</p>
  <p>This is a paragraph 2.</p>
  <p>This is a paragraph 3.</p>
</body>


Csslist2 display.png

Example B

[style.css]

 p#two {
   display: none;
 }

[index.html]

<body>
  <p>This is a paragraph 1.</p>
  <p id="two">This is a paragraph 2.</p>
  <p>This is a paragraph 3.</p>
</body>

Csslist2 display2.png

CSS Reference

The CSS specification defines the display property in 9.2.4 The 'display' property.