What is the difference between the display property: block and display: inline?

Elements with display: block occupy the full available width, start on a new line, and are stacked vertically. You can set width, height, margin (all sides), and padding (all sides).

Elements with display: inline occupy only as much space as their content needs, are in the text flow, and are arranged horizontally. You cannot set width and height. Horizontally, you can set margin and padding, but vertically only padding. margin-top and margin-bottom are not applied.

/* Example of display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Example of display: inline */
span {
  display: inline;
  /* width and height are not applicable */
  margin: 10px; /* margin-top and margin-bottom are ignored */
  padding: 5px;
  background-color: lightgreen;
}