Trabajo con la propiedad display en CSS

Ya sabes que todas las etiquetas pertenecen a un determinado modelo de caja. Sin embargo, si se desea, se puede cambiar el modelo mediante la propiedad display. Con el valor block de esta propiedad se puede hacer que un elemento sea de bloque, y con el valor inline - en línea.

Hagamos que las etiquetas span se comporten como elementos de bloque:

html<span>text</span>
<span>text</span>
<span>text</span>

cssspan {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Y ahora hagamos que las etiquetas div se comporten como elementos en línea:

html<div>text</div>
<div>text</div>
<div>text</div>

cssdiv {
  display: inline;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат: