Arbejde med display egenskaben i CSS

Du ved allerede, at alle tags tilhører en bestemt blokmodel. Ved ønske kan man dog ændre modellen ved hjælp af egenskaben display. Ved hjælp af værdien block for denne egenskab kan man gøre elementet til et blokelement, og ved hjælp af værdien inline - til et inline-element.

Lad os gøre sådan, at span tags opfører sig som blokelementer:

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 nu lad os gøre sådan, at div tags opfører sig som inline-elementer:

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

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

Результат: