Web tasarımında sayfa düzenlemesi, HTML ve CSS’in etkileşimli kullanımı ile mümkün olur. display: inline-block özelliği, öğeleri blok gibi düzenlemenin yanı sıra, öğeleri yatay olarak sıralama yeteneği sunar. Bu, özellikle navigasyon menüleri, düğmeler ve içerik kutuları gibi öğeleri hizalamak için kullanışlıdır.
display: inline-block Nedir?
display: inline-block, bir öğenin inline ve block özelliklerini birleştirir. Yani, öğe içeriklerini yan yana sıralayabilir ve aynı zamanda öğenin içeriğini blok öğeler gibi düzenleyebilirsiniz.
Örnek Kullanım:
Önce, HTML yapımızı oluşturalım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Inline-Block Layout</title>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
Sonra, CSS dosyamızı oluşturalım (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
.container {
width: 100%;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
font-size: 24px;
margin: 10px;
}
Bu basit örnekte, .box sınıfına sahip üç div öğesi oluşturduk. Bu öğeleri display: inline-block özelliği ile yan yana hizaladık ve her birine genişlik, yükseklik, renk ve kenar boşluğu özellikleri ekledik.
Sonuç:
Bu örneği tarayıcınızda açtığınızda, üç kutunun yan yana sıralandığını görmelisiniz. display: inline-block özelliği sayesinde her bir kutu içeriği, blok öğeler gibi düzenlenirken, aynı zamanda yan yana sıralanmıştır.
Bu basit teknik, birçok tasarım öğesinde kullanılabilir ve web sayfanızın düzenini daha etkili bir şekilde kontrol etmenize yardımcı olabilir.