CSS Display
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
| Values | Description |
|---|---|
| inline | It is used to displays an Html element in same line (like <span>). |
| none | It is used to hide the Html element. |
| block | It is used to displays an element as a block element (like <p>). |
| list-item | Let the element behave like a <li> element. |
| run-in | It Displays an element as either block or inline, depending on context. |
| initial | Sets this property to its default value. |
| inherit | It 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
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
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
Browser supported
| Property | |||||
| display | Yes | Yes | Yes | Yes | Yes |