Difference between inline and inline-block in CSS

This article is created to differentiate between inline and inline-block, the two values used to define the display property in CSS.

The display: inline creates inline-level container in which each items displays in a line like SPAN. Whereas the display: inline-block creates inline-level block container.

The main difference between these two is, the width and height properties have no effect on inline-level container, whereas these properties can be applied to inline-level block container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .one div{display: inline; background-color: purple; color: whitesmoke;
         padding: 12px; width: 80px;}
      .two div{display: inline-block; background-color: purple; color: whitesmoke;
         padding: 12px; width: 80px;}
   </style>
</head>
<body>

   <h2>display: inline</h2>
   <div class="one">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>

   <h2>display: inline-block</h2>
   <div class="two">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>

</body>
</html>

Output

display: inline

display: inline-block

CSS Online Test

« Previous Tutorial Next Tutorial »