Układ CSS - wyświetlanie: inline-block
Wyświetlacz: inline-block Wartość
W porównaniu do display: inline, główna różnica polega na tym, że display: inline-blockpozwala na ustawienie szerokości i wysokości elementu.
Również w przypadku
display: inline-block, górny i dolny margines/wypełnienie są przestrzegane, ale w display: inlineprzypadku nie.
W porównaniu z display: block, główna różnica polega na tym, że display: inline-blocknie dodaje się łamania linii po elemencie, dzięki czemu element może znajdować się obok innych elementów.
Poniższy przykład pokazuje różne zachowanie display: inlinei display: inline-block
:display: block
Przykład
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Używanie inline-block do tworzenia łączy nawigacyjnych
Jednym z powszechnych zastosowań for display: inline-block
jest wyświetlanie elementów listy w poziomie zamiast w pionie. Poniższy przykład tworzy poziome łącza nawigacyjne:
Przykład
.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;
}