CSS Display


Prev Tutorial Next Tutorial

CSS Display

CSS display is the most important property of CSS which is used to display Html elements on web page. Every Html element on the webpage is a rectangular box and the CSS display property specifies the type of box used for an Html element.

CSS display values

ValuesDescription
inlineIt is used to displays an Html element in same line (like <span>).
noneIt is used to hide the Html element.
blockIt is used to displays an element as a block element (like <p>).
list-itemLet the element behave like a <li> element.
run-inIt Displays an element as either block or inline, depending on context.
initialSets this property to its default value.
inheritIt is used to inherit this property from its parent element.

CSS display:inline

It is used to display an Html elements in same line without any line break. In below example three paragraph display in same line.

Example - display:inline

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p
{
display:inline;
}
</style>  
</head>  
<body>  
<p>Inline display</p>
<p>Inline display</p>
<p>Inline display</p>
</body>  
</html>

Result

Inline display

Inline display

Inline display

CSS display:none

It is used for hide text on browser but it do not take any space. In below example we hide three paragraph text.

Example- display:none

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p
{
display:none;
}
</style>  
</head>  
<body>  
<p>Text not display</p>
<p>Text not display</p>
<p>Text not display</p>
</body>  
</html>

Result

Text not visible

Text not visible

Text not visible

CSS display:block

It is used to displays an element as a block element. It display an elements same like <p> tag. In below example we display text by using <span> tag. It take some space and also line break same like paragraph.

Example- display:block

<!DOCTYPE html>  
<html>  
<head>  
<style>  
span
{
display:block;
}
</style>  
</head>  
<body>  
<span>Block display elements</span>
<span>Block display elements</span>
<span>Block display elements</span>
</body>  
</html>

Result

Block display elements Block display elements Block display elements

CSS display:inline-block

It is used to displays an element as a block element. It display an elements same like <p> tag. In below example we display text by using <span> tag. It take some space but it display all element in same line.

Example- display:inline-block

<!DOCTYPE html>  
<html>  
<head>  
<style>  
span
{
display:inline-block;
}
</style>  
</head>  
<body>  
<span>Inline-block elements</span>
<span>Inline-block elements</span>
<span>Inline-block elements</span>
</body>  
</html>

Result

Inline-Block elements Inline-Block elements

CSS display:run-in

This property do not work in Mozilla Firefox. It Displays an element as either block or inline, depending on context.

Example- display:run-in

<!DOCTYPE html>  
<html>  
<head>  
<style>  
span
{
display:run-in;
}
</style>  
</head>  
<body>  
<span>Run-in display elements</span>
<span>Run-in display elements</span>
</body>  
</html>

Output

Run-in display elements Run-in display elements

Browser supported

Property
displayYesYesYesYesYes

Prev Tutorial Next Tutorial

Google Advertisements
Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements