CSS and Display

CSS Display

How an HTML element is display.

Display Property

This property control the layout of element.

Example

This list of links is represent as inline

• PHP
• CSS
• html

Note: All HTML element have default value of display (display:Block) and Generally default value of display is inline or block.

Block level Element

Those HTML element which always start from new line and take full width from left to right.

<div> paragraph -h1 to h6 Tag -order list Tag -unorder list Tag -section Tag -form Tag -header Tag

Inline Element

Those HTML element which do not start from new line and take width from starting tag to ending.

<em> <span> <a> <img>

Default Display Value

You can override the display value such as in following example default is block then you can override to inline

Example <style> li { display: inline; } </style> <p>This list of links is represent as <b>inline</b> </p> <ul> <li><a href="#PHP">PHP</a></li> <li><a href="#CSS">CSS</a></li> <li><a href="#html"> html</a></li> </ul>

Display none

Example <style> h2{display: none;} </style> <h1>This is h1 heading </h1> <h2>This is h2 heading </h1> <p> The h2 heading is <b>display:none</b> thats why not show </p>

Visibility Hidden

Example <style> h2{display: none;} </style> <h1>This is h1 heading </h1> <h2>This is h2 heading </h1> <p> The h2 heading take space because visibility is <b>hidden</b> </p>