Why we need inline box/inline element instead of block-level box/element?

I mean, If all element is block-level, then there may be more simple to learn. so, why we need thi开发者_Go百科s kind of box/element?

Block-level elements cannot be placed next to each other, in contrary to inline and inline-block elements.

Example:

<div style="display:block;width:40px">Up</div>
<div style="display:block;width:40px">Down</div>

<div style="display:inline-block">Left</div>
<div style="display:inline-block">Reft</div>

<div style="display:inline">left</div>
<div style="display:inline">right</div>

If all tags would be treated as block level elements, the following snippet:

<div>This is a <a href=".">link</a>, you can <b>click</b> it.</div>

would look like this in your browser:

The corresponding code:

<div>This is a <a href="." style="display:block">link</a>, you can <b style="display:block">click</b> it.</div>

Edit: By the way, if there is a need for you to deal with block elements only, just reset the HTML using CSS: * { display:block}