Here’s some HTML.

<p>I <em>really</em> love dogs.</p>

It renders likes this (though smaller and without the lines):

Figure 1. Inline and block

The <p> tag is a block tag. It creates a square block on the screen, with white space on all sides.

This can be changed with CSS, but space on all sides is the default.

The <em> tag is an inline tag. It’s turned on inside a block tag, and keeps running until it gets turned off.

An inline tag might not create a rectangular area. This code:

<p>I <em>really really really really really really </em> love dogs.</p>

It might look like this, in a browser that’s zoomed in and put in a small window:

Figure 2. Inline not always a rectangle

You can’t draw a rectangle around the italicized text without including other stuff. But for a block tag, you can draw a simple rectangle that bounds the block content.

The bottom line: block tags create a rectangular area for themselves, with space on the top, bottom, left, and right. Inline tags don’t.