Block Elements , Inline Elements And Inline-Block Elements In HTML

Block Level Elements

Block level elements take up as much space as possible by default. Each block level element will start a new line on the page, stacking down the page. In addition to stacking vertically, block level elements will also take up as much horizontal space as possible.
Example of block-level elements include-<div>,<p>,<h1> to<h6> etc.

<div>
  This is a block-level div element.
</div>

Inline Elements

Inline elements display in a line. These elements do not start on a new line and only take up as much width as necessary.
They do not force the text after them to a new line.
Example of Inline-level elements include-<span>,<a>,<strong> ,<image> etc.

An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.

<p>Visit our <a href="https://hsb.com">website</a> for more knowledge.</p>

Inline-Block Elements

Inline -Block elements do not start on a new line. It takes up only as much width as necessary. It allow for the setting of width and height as well as it allow horizontal margins and padding also.
i.e we can say that the display value of inline-block works similarly to inline with one exception: the height and width of that element become modifiable.

<p>This is an inline-block <span style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;"></span> element.</p>

In this block of code we first use <p> that is an block element and after then we use <span> tag in which we use "display inline block" which allow to modify the code as user requirements.