Difference between inline and block in CSS

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

The display: inline creates inline-level container where each items displays in a line like SPAN. Whereas the display: block makes an element behaves like P element, where element starts with a new line and takes the whole width. For example:

HTML with CSS Code

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

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

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

</body>
</html>

Output

display: inline

display: block

Note - The height and width properties have no effect on inline 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; height: 60px;}
      .two div{display: block; background-color: purple; color: whitesmoke;
         padding: 12px; width: 80px; height: 60px;}
   </style>
</head>
<body>

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

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

</body>
</html>

Output

display: inline

display: block

CSS Online Test

« Previous Tutorial Next Tutorial »