Arbeid med display-egenskapen i CSS

Du vet allerede at alle tagger tilhører en bestemt blokkmodell. Om ønskelig kan man imidlertid endre modellen ved hjelp av egenskapen display. Ved bruk av verdien block av denne egenskapen kan man gjøre elementet til et blokkelement, og ved bruk av verdien inline - til et inline-element.

La oss gjøre slik at taggene span oppfører seg som blokkelementer:

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

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

Результат:

Og nå la oss gjøre slik at taggene div oppfører seg som inline-elementer:

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

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

Результат: