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;