Display
In this article we are going to learn about display with values of block, inline, inline-block and none in css, how to show or hide our content in html using only css display property.
We learnt about css in general, padding, float, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css, internal css, external css, selectors css and positions css so, we will be focusing on display property.
Display
Display is a Cascading Style Sheets property that is used to show or hide webpage content or elements and it is the most important css property when controlling different screen layouts.
Display block
Diplay block is a default css property that is used to show content or elements in webpages and an inline element act like block-level element.
Let us create a another div element with a block value of display property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.display-example {
display: block;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="display-example">This is a div element with a block value of display property applied.</div>
</body>
</html>
So, we should have the following results and by default the content will still show up even if we did not apply display block property.
Display inline
Inline is a value of a display css property that causes a block-level element to act like an inline element.
Let us create a another div element with an inline value of display property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.display-example {
display: inline;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="display-example">This is a div element with an inline value of display property applied.</div>
</body>
</html>
So, we should have the following results.
Display inline-block
Inline-block is a value of a display css property that causes a block-level element to flow like an inline element, while retaining other features of a block-level element.
Let us create a another div element with an inline-block value of display property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.display-example {
display: inline-block;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="display-example">This is a div element with an inline-block value of display property applied.</div>
</body>
</html>
So, we should have the following results.
Display none
Display property with a value of none is used in css to hide any element or content in the webpage.
Let us create a div element with a none value of display property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.display-example {
display: none;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="display-example">This is a div element with a none value of display property applied.</div>
</body>
</html>
So, we should have the following results and the content or div element is not shown up because we applied display with a none value of display property on it.