Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Inline-block Özelliği konusunu öğreneceğiz.
CSS'de "display:inline-block" özelliği, etiketler üzerinde genişlik ve yükseklik ayarlamaya izin verir, display:inline ile aralarındaki en belirgin fark budur.
Ayrıca, display: inline-block, üst ve alt kenar boşluklarına / dolgulara (margin/padding) kabul eder ve uygular, ancak display: inline uygulamaz.
display: block ve display:inline karşılaştırıldığında, display: inline-block etiketten sonra bir satır sonu eklememesidir, böylece etiket diğer etiketlerin yanında yer alabilir.
Aşağıdaki örnek, display: inline, display: inline-block ve display: block davranışını gösterir:
span.a {
display: inline; /* varsayılan 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;
}
Bu özellik için yaygın bir kullanım şu şekildedir, satır içi blok liste öğelerini dikey yerine yatay olarak sıralamakta kullanılır. Aşağıdaki örnek, yatay bir menü oluşturur:
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Yatay Menü</h1>
<ul class="nav">
<li><a href="#home">Anasayfa</a></li>
<li><a href="#about">Hakkımızda</a></li>
<li><a href="#project">Projelerimiz</a></li>
<li><a href="#contact">İletişim</a></li>
</ul>
</body>
</html>