INLINE, BLOCK and INLINE BLOCK ELEMENTS - CSS

 BLOCK ELEMENTS:

Elements which occupy 100% of parents element width, no matter the size these elements are block level elements. These elements are stacked vertically by default one after another. Elements are formatted visually as blocks. Most of the HTML elements are block level elements. 

Eg: main, body, header, footer, p, div, section, etc. 

Even the elements which are not block elements can be converted into block elements using the display property.

 display: block;

INLINE ELEMENTS:

Elements which occupies the only spaces necessary for its content, are inline elements. Since these elements occupies the necessary space, there are no line breaks after or before the elements. Box model applies in different way here, height and width properties do not apply and paddings and margins are applied only horizontally i.e:  (right and left side of the elements). Some of the HTML inline elements are given in the below example.

Eg: a, img, strong, em, button, etc.

Block elements and inline block elements can be converted into inline elements using the display property.

display: inline;

INLINE-BLOCK ELEMENTS

The elements which behaves like a inline from the outside, behaves like block level on inside. i.e The elements occupies only the necessary space for the content and causes no line break but the box model is applied as in the block level elements so the height and width properties applied here.

For example image element is an inline block element. 

The other element can be converted as inline block using display property .

display:  inline-block;

THANK YOU!!!

HAVE A GOOD DAY!!!