Werk met die display eienskap in CSS

Jy weet reeds dat alle etikette aan 'n spesifieke blokmodel behoort. Op verlange kan eger die model verander word met behulp van die display eienskap. Met die waarde block van hierdie eienskap kan 'n element blok gemaak word, en met die waarde inline - inlyn.

Laat ons die span etikette so maak dat hulle soos blokelemente gedra:

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

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

Результат:

En nou maak ons die div etikette so dat hulle soos inlynelemente gedra:

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

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

Результат: