Trabalhando com a propriedade display em CSS

Você já sabe que todas as tags pertencem a um determinado modelo de caixa. No entanto, se desejar, você pode mudar o modelo usando a propriedade display. Usando o valor block desta propriedade, um elemento pode se tornar um elemento de bloco, e usando o valor inline - um elemento em linha.

Vamos fazer com que as tags span se comportem como elementos de bloco:

html<span>texto</span>
<span>texto</span>
<span>texto</span>

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

Результат:

E agora vamos fazer com que as tags div se comportem como elementos em linha:

html<div>texto</div>
<div>texto</div>
<div>texto</div>

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

Результат: