This article needs an editorial review. How you can help.
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ı.
İç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
- CSS Reference
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.
- İlgili CSS özellikleri:
box-sizing,background-clip,height,max-height,min-height,width,max-height,min-height,padding,padding-top,padding-right,padding-bottom,padding-left,border,border-top,border-right,border-bottom,border-left,border-width,border-top-width,border-right-width,border-bottom-width,border-left-width,margin,margin-top,margin-right,margin-bottom,margin-left