HTML elemanları varsayılan görüntülenme değerleri bakımından block ve in-line olmak üzere ikiye ayrılır.
Block level tipindeki etiketler sayfada ekranın genişiliği kadar yer kaplar örneğin <h1> block level elementtir.
In-line etiketler ise sayfada içeriği kadar yer kaplar. Width, height gibi özellikler verilemez örneğin <a> etiketi, in-line tipinde bir elementtir ve sadece içeriği kadar yer kaplar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5 - Block & Inline Elements</title>
<style>
h1 {
width: 150px;
height: 150px;
}
a { /*width height vs. saydece Block Level elemanlarda verilebilir dolayısıyla a etiketine veridiğimiz genişlik yüks. çalışmaz */
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<h1>Başlık 1</h1> <!-- h1 etiketli block level bir elemandır yani genişliği sayfanın genişliği kadar devam eder genişlik:1264px -->
<h2>Başlık 2</h2>
<a href="#">Link 1</a> <!-- a etiketi ise inline bir elemandır yani sayfada sadece içeriği kadar yer kaplar genişlik:22px -->
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</body>
</html>
Mehmet İçme 
Yorum bırakın