The CSS display Property

By: Dusty Arlia
Published on January 14, 2013
Last Updated on Wednesday, July 15, 2015 at 6:48 PM
Total Updates: 2

The CSS display property controls how certain elements should be displayed. Different HTML elements have different default display properties. For example, images (the <img> tag) have the display property value of "inline" while divs (<div>) have a default display property of "block". inline elements can be displayed inline or in other words side-by-side. They go with the flow of the elements before and after it, kind of like words in a sentence. block elements on the other hand start on a new line and go the width of its containing element. Other block elements include paragraphs and headers.

There are more display properties besides inline and block, but they are the most common. Here are some other display property values:

Value Description
none The element will not be displayed at all
box (or flex-box) The element is displayed as a block-level flex container box
block The element is displayed as a block-level element (like paragraphs and headers)
flex The element is displayed as a block-level flex container box
inline This is default. The element is displayed as an inline-level element (like span)
inline-block The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
inline-flex The element is displayed as an inline-level flex container box
inline-table The element is displayed as an inline-level table
list-item The element is displayed as a list-item, which means that it has a bullet in front of it
table The element is displayed as a table
table-caption The element is displayed as a table caption
table-cell The element is displayed as a table cell
table-column The element is displayed as a table column
table-column-group The element is displayed as a table column group (like <colgroup>)
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row The element is displayed as a table row
table-row-group The element is displayed as a table row group
inherit The value of the display property will be inherited from the parent element

References

CSS display Property. (n.d.). Retrieved January 14, 2013, from
http://www.w3schools.com/cssref/pr_class_display.asp

Comments:

Ad:

Ad: