What is the Difference Between the "inline" and "inline-block" Values of the CSS display Property

Difference between display: inline and display: inline-block

As we know, the CSS display property specifies the box type used for HTML elements. Two frequently used values of this property are "inline" and "inline-block" that seem quite similar at first sight. But let’s see what is the actual difference between them.

In contrast to "inline" display, elements with an "inline-block" display allow specifying a width and height for the element. Also, the top and bottom margins and paddings are respected with "inline-block".

An element with "inline-block" is placed as an inline one on the same line with the adjacent content, but it behaves like a block element.

Now, let’s see an example, where we use both the "inline" and "inline-block" values to demonstrate the difference between them.

Example of using the "inline" and "inline-block" display on <span> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span.inline {
        display: inline; /* the default for span */
        padding: 3px;
        border: 1px solid #000;
        background-color: #749be8;
      }
      span.inline-block {
        display: inline-block;
        width: 100px;
        height: 50px;
        padding: 3px;
        border: 1px solid #000;
        background-color: #66de9c;
      }
    </style>
  </head>
  <body>
    <h1>Example of the CSS display property</h1>
    <h2>display: inline</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      <span class="inline">Lorem Ipsum</span> has been the industry's standard dummy 
      text ever since the 1500s, when an unknown printer took a galley of type 
      and scrambled it to make a type specimen book.
    </div>
    <h2>display: inline-block</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      <span class="inline-block">Lorem Ipsum</span> has been the industry's standard dummy
      text ever since the 1500s, when an unknown printer took a galley of 
      type and scrambled it to make a type specimen book.
    </div>
  </body>

</html>

Try it Yourself »

Result

display: inline

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

display: inline-block

Example of using the "inline" and "inline-block" display on <strong> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-weight: bold;
        margin: 0 0 15px;
      }
      p:first-of-type {
        padding-bottom: 5px;
      }
      div {
        margin: 0 0 40px;
      }
      strong {
        padding: 10px;
        width: 150px;
        height: 150px;
        border: 5px solid purple;
        background-color: pink;
      }
      .inline {
        display: inline;
      }
      .inline-block {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>Example of the CSS display property</h1>
    <p>display: inline</p>
    <div>
      <strong class="inline">Lorem Ipsum</strong>
    </div>
    <p>display: inline-block</p>
    <div>
      <strong class="inline-block">Lorem Ipsum</strong>
    </div>
  </body>
</html>