Example of using the "inline" and "inline-block" values of the display property:

Source Code: (back to article)

<!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>