Tuesday, October 9, 2012

CSS display property

This is the best article (as of writing this note) I found from google The CSS Display Property: A Reintroduction To A Familiar Friend, it uses simple words to explain display property.

Most frequently used display values are the followings (there are a bunch of table-values and new CSS3 values based on flex box model or grid model)
  • inline
  • block
  • inline-block
  • list-item
  • none
  • inherit
inline - (Default value) The element is displayed as an inline element (like span, a), horizontally displayed and don’t follow the box model, so it doesn't form a new box.

block - The element is displayed as a block element (like p, div, h1), vertically one after the other following box model, so it is a new box with margin, border, and padding.

inline-box - The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element. It acts like inline boxes on the outside (being laid out horizontally), but they’re block level boxes on the inside (form a new box with vertical margins and paddings). It is height is calculated using line-height or based on containing block (box).

list-item - The element behaves like block level element with the addition of an extra box (the marker box) used to place a marker.

none - The element will not be displayed at all (removed from DOM, different from visibility)

inherit - The value of the display property will be inherited from the parent element 

No comments:

Post a Comment