CSS and Display


css CSS and Display Css 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

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>
css Css Display Chapter Next »