CSS asettelu - display: inline-block

näyttö: inline-block

verrattuna näyttö: inline verrattuna näyttö: inline-block Sallitaan leveys ja korkeus elementin asettamiseen.

Samoin, jos näyttö: inline-block on asetettu, säilytetään ylä- ja alavälistä reunaväliä/päätyväliä, mutta näyttö: inline ei.

Näyttö: block - vertailussa, pääasiallinen ero on, että näyttö: inline-block ei lisää rivinvaihtoa elementin jälkeen, joten elementti voi olla muiden elementtien viereisessä.

Seuraavassa esimerkissä näytetään näyttö: inline, näyttö: inline-block ja näyttö: block erilaiset käyttäytymiset:

Esimerkki

span.a {
  näyttö: inline; /* span oletusarvo */
  leveys: 100px;
  korkeus: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
span.b {
  display: inline-block;
  leveys: 100px;
  korkeus: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
span.c {
  näyttö: block;
  leveys: 100px;
  korkeus: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

Kokeile itse

Navigointiliinkkien luominen inline-blockilla

display:n yleinen käyttötapa:inline-block Näytetään listaelementit horisontaalisesti sen sijaan, että ne näytettäisiin vertikaalisesti. Seuraavassa esimerkissä luodaan horisontaalinen navigointiliinkki:

Esimerkki

.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}
.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Kokeile itse