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(<p>)

• Headers(<h1>….<h6>)

• Divs(<div>)

• Lists & list item(<ol>,<ul>,<li>)

• Forms(<form>).

(B) Inline:-

Take the only amount of space that is needed.

Some Inline elements are:-

• spans(<span>)

• images(<img>)

• Anchors(<a>)

Q) 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;