Most used values of the 'display' property in CSS

The display property defines how HTML elements should be displayed.

  • display: block

The element will generate a block around it with line break before and after the element.

 block

  • display: inline

The element will generate an inline box around it, which will be in line with rest of the content.

 inline 

  • display: inline-block

The element will generate a block box positioned as an inline box.

 inline-block

  • display : none

The element will not generate any box; the element will not be displayed at all.

  • display: inline-table

The element will generate a table like box positioned as an inline box.

 inline-table 

  • display: list-item

The element is displayed as a list item. The list is an unordered list and hence preceded by a bullet mark.IE5 on Mac displays the list as ordered.

 list-item 

  • display: run-in

The element will generate a block box if it is followed by any box other than block box. It will generate an inline box if followed by a fixed and absolutely positioned block box.

 run-in 

  • display: inherit

The element inherits its value from its parent element.

Filed Under: CSS Hacks, Tips and Tricks

Tags:

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (0)

Trackback URL

Leave a Reply