There were NO LINE BREAKS (br) in the source code of the previous example that introduced inline and block elements. But when you look at the resulting web page, there are lots of blank lines between the block elements.

There is a blank line above this sentence caused by two consecutive line break (br) tags. It's tempting to think that the browser is simply adding two line breaks between block elements. But that's NOT what is going on.

It's hard to wrap your brain around the true nature of inline and block elements without seeing borders around them as shown below. You can see in the HTML head section how the borders are created, but don't focus on that. The main point of this example is that the borders show you the EXACT extent of the inline vs block formatting.

Here are the inline elements (text elements): bold text (b), italic text (i), small text (small), highlighted text (mark), monospace font (code), superscripts (e=mc2), and subscripts (H20). The borders show that the formatting induced by the inline elements is entirely inline with the flow of text. The inline elements do NOT alter the flow of text in the page.

Now observe the formatting reach of block elements, like this paragraph and the next one. They are literally carving whole blocks out of the page. In the source code, there are NO line breaks (br) creating what appear to be blank lines above and below these paragraphs.

The space above, between, and below the paragraphs is created by top/bottom margins of the paragraph blocks. Not only are the block elements carving a block out of the page layout flow, but the browser is rendering blank space (margins) above and below them. In fact, notice that all of the other block elements below have top/bottom margins that create vertical space between them.

The 3 heading blocks below are very much like the above paragraph blocks. But they induce bold formatting of various sizes and have slightly more space between them (bigger margins).

Heading level 2

Heading level 4

Heading level 6
This is a blockquote element. It is very much like the other block elements, but has increased left/right margins. 
      
            This is a pre-formatted block (pre) - preserves whitespace and (unfortunately) induces a monospace font (e.g. monaco or courier).

Finally, it is VERY IMPORTANT to note how inline formatting and block formatting elements work together.

You can see in this paragraph that it is logical to use inline elements inside of block elements.

That is, it makes sense to apply text-level formatting inside blocks. Blocks are structural elements that may contain text that needs to be formatted.

Conversely, it is NOT logical

to use block elements (like this paragraph block)

inside of inline elements (like this inline bold) because then things get really funky. That makes sense if you stop and think about the nature of blocks (structure) vs inline elements (text content).