Giriş
Aşağıdaki kodları ekrana yazdığınızda , yanyana durabilecek kadar kısa kelimeler olmasına rağmen alt alta hizalandığını görürsünüz. Bunun sebebi bazı taglerin blog düzeyinde bazılarının ise kutu düzeyinde olmasındandır. Yani siz bir kelimeyi veya içeriği <div> </div> içerisine aldığınızda onun görünmeyen bir çerçevesi ve sınırları vardır. Bu da kendinden sonra gelen elementi aşağı iter. Bu sınırları <div>’e background color vererek çok daha rahat görebilirsiniz.
<div> MERHABA </div>
<p> SELAM </p>
Aşağıda SELAM kendinden sonra gelen tag’i aşağı atmaz çünkü satır düzeyindedir. Div ise blog düzeyinde elementtir.
<div> MERHABA </div>
<p> <strong>SELAM</strong> SELAM </p>
Kutu modeli
Kutu modelinden bahsetmeye başlarken yukarıdaki fotoğraf üzerinden bişeyler anlatarak başlayayım. Her içeriğin veya etiketin etrafında görünmeyen bir çerçevesi vardır. Eğer bu içeriği kapsayan tag’e bir border atarsanız bunu çok net bir şekilde göreceksiniz. Yukarıda da söylediğim gibi, bu içerikler görünemeyen borderları kapsamında kendilerine etiket yaklaştırmazlar. Yukarıdaki resmi daha detaylı incelemek istersek.
Padding : İçeriğimiz ile sınır çizgimiz arasında kalan mesafe yani iç boşluk
Margin : Sınır çizgimizle alan kapsamı arasında kalan mesafe yani dış boşluk
float : left/right
left : ilk blogu sola hizalar diğerlerini onun yanına hizalar.
right : ilk blogu sağa hizalar diğerlerini onun yanına hizalar.
<html> <head> <meta charset="utf-8" /> <title></title> <style> div { width:100px; height:50px; padding:5px; margin :5px; border:1px solid black; float: left /right; } </style> </head> <body> <div>kutu modeli1</div> <div>kutu modeli2</div> <div>kutu modeli3</div> </body> </html>
left ise bu şekilde sağa , right parametresinde ise kutu modeli 1 en sağda ve ekranın sağına yapışık 2 ve 3 olarak sıralanır.