Pazartesi , 24 Temmuz 2017
Anasayfa » WEB » CSS » Kutu Modeli (Box Model)

Kutu Modeli (Box Model)

Bir HTML dökümanı içinde, her etiket bir dikdörtgen kutu olarak kabul edilir. Bu kutuların özelliklerini (genişlik,yüksekli renk vb.) yorumlamak tarayıcı motorlarının görevidir.

CSS ile tüm kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanmaktadır. Box model tanımlaması her bir etiketin ekranda ne kadar yer kaplayacağını ifade etmektedir. Her bir kutunun genişlik/yükseklik, iç boşluk(padding), kenarlık (border) ve dış boşluk (margin) değerleri etiketin toplam kaplayacağı alanı ifade etmektedir.css-box-model

Content(İçerik Alanı): etiketin içeriğinin kapladığı alanı ifade eder.  Yazı, resim gibi değerler bulunur. box-sizing özelliği varsayılan olarak ayarlıysa  içerik ölçüleri,  içerik genişliği ve içerik yüksekliğidir.

Padding: Çerçeve(border) ile içerik(content) arasındaki alanı ifade etmektedir. İçerği dolgu olarak genişletmektedir. İç boşluk olarak düşünebiliriz.

 

 

Border: Etiketin çerçeve alanıdır. dış boşluk ile iç boşluk arasında yer almaktadır. Border alanının ebat ölçülerinin dışında rengi de olabilir.

Margin: Border alanını dış kısma doğru genişletmektedir. Etiketin dış boşlu olarak düşünülebilir. Margin alanı komşu etiketle mevcut etiket arasında boşluk bırakmak için kullanılır.

Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS’in line-height özelliğidir.

Box-sizing özelliği ile kutu modelindeki margin, padding, border yada bunların çeşitli eşleşmelerini kutu modelinin toplam alanına dahil etmek mümkündür.

KAYNAK

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

https://css-tricks.com/the-css-box-model/

https://www.w3.org/TR/CSS2/box.html

Hakkında Hayri

İlginizi Çekebilir

CSS Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız. İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir