display:inline-block example:

chnage the .test class to inline, block, inline-block and chk the output

<h1>display: inline</h1>
<div>
    Ach, was muß man oft von bösen<br/>
    Kindern hören oder lesen!<br/>
    Wie zum Beispiel hier von diesen<br/>
    Welche <span class="test">Max und Moritz</span> hießen.<br/>
    Die, anstatt durch weise Lehren<br/>
    Sich zum Guten zu bekehren,<br/>
    Oftmals noch darüber lachten<br/>
    Und sich heimlich lustig machten.<br/>
</div>
<style>
h1 { font-size: 20px; font-weight: bold; }
div { border: solid 1px #c0c0c0; padding: 8px; margin: 12px; background-color: #f0f0e9; width: 70% }
.test { display: inline-block; height: 100px;  border: dotted 1px red; background-color: white; }
</style>

Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.

div {
  display: inline;        /* Default of all elements, unless UA stylesheet overrides */
  display: inline-block;  /* Characteristics of block, but sits on a line */
  display: block;         /* UA stylesheet makes things like <div> and <section> block */
  display: run-in;        /* Not particularly well supported or common */
  display: none;          /* Hide */
}

The default value for all elements is inline. Most "User Agent stylesheets" (the default styles the browser applies to all sites) reset many elements to "block". Let's go through each of these, and then cover some of the other less common values.

Inline

The default value for elements. Think of elements like <span>, <em>, or <b> and how wrapping text in those elements within a string of text doesn't break the flow of the text.

The <em> element has a 1px red border. Notice it sits right inline with the rest of the text.

An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically.

An inline element will not accept height and width. It will just ignore it.

Inline Block

An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the "baseline"). The difference is that you are able to set a widthand height which will be respected.

Block

A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text "blocks" like <p> and<h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.

The two elements with the red borders are <p>s which are block level elements. The <em>element in between them doesn't sit inline because the blocks break down below inline elements.