Jobs Hub

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

A
B
C

display: block

A
B
C

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

A
B
C

display: block

A
B
C

CSS Online Test

« Previous Tutorial Next Tutorial »