Block Elements

From the above code, we see that the two sentences are printed on two different lines. There was space after the first sentence but as we used <p> tag the next sentence was placed on a new line.

Thus it is a block element.

The flow of content is blocked by the <p> tag.

Inline Element

The text written within <span> tag is printed in a single line.

<span> tag didn't block the flow of content. Thus it is an in-line element.

Common Block Element Examples

paragraph (<p>,</p>)

heading(<h1> to <h6>)

divisions(<div>,</div>)

list(<li>,</li>,<ol>,<ul>)

Common In-Line Element Examples

span(<span>,</span>)

images(<img>)

anchor(<a>,</a>)

Nesting In-Line Elements Within a Block Element

Drawbacks of In-Line Elements

In-line elements cannot change their width or height.

No changes at all.

In-Line Block

These are in-line elements whose width can be changed.

<img> tag is also an in-line block element.