CSS Display Property Explained In Detail

CSS display property allows you to set how an element an element is display and even if it's displayed. You can display an element block, inline, inherit or none.

Block makes the element take up a whole row in the HTML element where it resides. Here's how it looks:

display:block;

Inline makes the element take up only the space it needs. Here's how it looks:

display:inline;

Inherit applies the same display property as its parent element. Here's how it looks:

display:inherit;

Display none makes elements disappear. It also makes it so the hidden element does not take up any space on the page. Here's how it looks:

display:none;

The display property is one of two properties used to make elements disappear. If you use visibility:none you will make an element disappear, but it still takes up the space on page so.

So if the element is 200 pixels high, using display:none the content of the element disappears and the "blank" space takes up zero pixels on the page.

If on that same element you use visibility:none you have a "blank" space that is still 200 pixels high.

That's all there is to it. I hope this video helps you! If you have any questions, please leave them in the comments below. And before you go, subscribe and like :)

If you're into Wordpress, check out my WPLearningLab channel to learn more about WordPress so you can earn more for yourself, for your clients or for your business.

[dremiq]

Easy and simple thanks for this sir :)

[davidkennell]

#bjorn {
transform: scaleX(0.7);
}