Display attributes: inline, inline-block, block differences

The following example shows the different behaviors of display: inline, display: inline-block, and display: block:

span.a {
  display: inline; /* the default value of span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
Copy the code

The main difference between display: inline-block and display: inline is that display: inline-block allows the width and height to be set on the element.

Similarly, if display: inline-block is set, upper and lower margins/inner margins are preserved, while display: inline is not.

The main difference from display: block is that display: inline-block does not add a newline after an element, so it can be placed next to other elements.