Arbeit mit der display-Eigenschaft in CSS

Sie wissen bereits, dass alle Tags zu einem bestimmten Blockmodell gehören. Bei Bedarf kann man jedoch das Modell mit der Eigenschaft display ändern. Mit dem Wert block dieser Eigenschaft kann ein Element blockartig gemacht werden, und mit dem Wert inline - inline.

Lassen Sie uns span-Tags so verhalten lassen wie Blockelemente:

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

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

Результат:

Und nun lassen Sie uns div-Tags so verhalten lassen wie Inline-Elemente:

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

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

Результат: