CSS DISPLAY PROPERTY BASICS

1)Block

2)Inline

3)Inline-Block

4)None

(A) Block:-

Take the whole width of a line.
or
Blocking out other elements which are in side by side position with it.

Some Block level elements are:-

• Paragraph
• Headers
• Divs
• Lists & list item
• Forms

(B) Inline:-

Take the only amount of space that is needed.

Some Inline elements are:-

• spans
• images
• Anchors

Que)Why do we use block elements when we can use inline elements which don't take much space?

Ans) When using an inline element, we can’t change the height & width, their height, and width are set according to the content inside them, while in block elements, we can change the width.**

NOTE:- We can change the property of the block element to an inline element using the display property, but after doing this, we can’t change width & height.

p{
display: inline;
}
//p is a block element but here we change its property to an inline element.//

(C) Inline-Block:-

• It’s a mixture of both inline and block properties.
• we can change the width of the element, as well as let it display as inline so that it takes the space as much needed to it.

p{
display: inline-block;
}

(D) None:-

• If we want to hide things on our page, we can do that by two methods.

    1)display: None;
  
    2)visibility: hidden;