CSS Display

Advertisements

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 Advertisment

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

For Projects 9999595223

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements