Kutu modeli

This translation is incomplete. Please help translate this article from English.

Özet

Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.

CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: margin kenarı, border kenarı, padding kenarı ve içerik kenarı.

CSS Box model

İçerik alanı, gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.

Eğer CSS'in  box-sizing özelliği varsayılan olarak ayarlandıysa, CSS özellikleri width, min-width, max-width, height, min-height ve max-height içerik boyutunu kontrol eder.

Padding alanı borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.

Padding kenarı ve içerik arasındaki boşluk padding-top, padding-right, padding-bottom, padding-left CSS özellikleri ve padding CSS kısa yazım biçimi ile kontrol edilir.

Border alanı padding alanını border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın border-width özelliği veya border kısa yazımı kullanılarak belirlenir.

Margin alanı border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan margin kenarı içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.

Margin alanının boyutları  margin-top, margin-right, margin-bottom, margin-left ve margin kısa yazımı CSS özellikleri kullanılarak kontrol edilir.

margin collapsing oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.

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.

Özellikleri

Özellik Durum Comment
CSS Level 2 (Revision 1) Recommendation

Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor

CSS Level 1 Recommendation  

Bunlara da bakın

Document Tags and Contributors

Tags: 
 Contributors to this page: cenkingunlugu
 Last updated by: cenkingunlugu,