Display Properties

We know that by default every html element is either block or inline-block or inline element and that is defined by display property.

We can anytime change an elements type to either inline or block or inline-block by the display property.
For ex: if we apply a css property of display: block to a span tag (which by default was inline element), then span tag will become a block element and all the block element properties such as margin/padding , width/height and others will be applicable to this span tag.

We can change any elements any type into other type based on our need. Look at below snippet to see how its done. 

h1{
  display: inline-block;
}

span{
  display: block;
}

p{
  display: inline;
}

// Special property
div{
  display: none;
}


One of the special usage of display property is display: none, which is used to hide elements on UI (visually you can not see it). Also, the element on which it is applied will not render on html document at all as if it never existed and hence the space, previously taken by it, will be taken by other element, if present because it does not exist.

Now look the two images to understand it better::

Before applying display: none

display block


After applying display: none

display none


Note::
Please note that to make some element hide we use display: none and to make it appear again, we use display: inline or display: inline-block property based on what was its value earlier before applying display: none property.

And the major thing to observe is that display has 2 more properties such as :
  • display: flex
  • display: grid
which we will learn in detail in layout properties section. Also for hiding it , we use the same trick of display: none and to make it reappear as display: flex or display: grid.
Visibility:
Visibility property also works similarly as display property. Both hides the element from UI. visibility: hidden will hides the element from only UI but on the html document the element will still exist and occupy its space as if it is still there just not visible, like a ghost.

Before applying visibility: hidden

visibility visible


After applying visibility: hidden

display none


Note::
Please note that, same trick of display is also applied here, to make some element hide we use visibility: hidden and to make it appear again, we use visibility: visible, irrespective of element being a block/inline-block/inline element or grid/flex type.

Also another property opacity: 0, works same as visibility: hidden. We can interact with opacity: 0 element like, if its a button then by a click but can not do with a visibility: hidden element.
PrevNext