CSS Düzeni - görüntüleme: satır içi blok
Ekran: satır içi blok Değeri
ile karşılaştırıldığında display: inline
, en büyük fark, display: inline-block
eleman üzerinde bir genişlik ve yükseklik ayarlamaya izin vermesidir.
Ayrıca, ile
display: inline-block
üst ve alt kenar boşluklarına/dolgularına saygı duyulur, ancak ile display: inline
değildir.
ile karşılaştırıldığında display: block
, en büyük fark, display: inline-block
öğeden sonra bir satır sonu eklememesidir, böylece öğe diğer öğelerin yanına oturabilir.
Aşağıdaki örnek, ve öğesinin farklı display: inline
davranışını display: inline-block
gösterir display: block
:
Örnek
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;
}
Gezinme Bağlantıları Oluşturmak için satır içi bloğu kullanma
Yaygın olarak kullanılan bir kullanım display: inline-block
, liste öğelerini dikey yerine yatay olarak görüntülemektir. Aşağıdaki örnek, yatay gezinme bağlantıları oluşturur:
Örnek
.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;
}