CSS'de, Box Model bir öğenin bir web sayfasında nasıl yapılandırıldığını ve konumlandırıldığını belirlemek için önemli bir kavramdır. Padding İçerik,, Border ve gibi temel bileşenlerden oluşur Margin.
Content
Content metin, resimler veya videolar gibi öğenin gerçek içeriğini içeren alandır.
İçeriğin boyutunu tanımlamak için width ve height özelliklerini kullanırız.
Padding
Padding içeriğin etrafındaki boşluktur ve içerik ile öğenin arasında bir boşluk oluşturur border.
Değerleri belirtmek için ve özelliklerini padding kullanırız . padding-top, padding-right,padding-bottom padding-left
Border
Border Öğenin etrafındaki ana hat, içerik ve çevreleyen alan arasında net bir sınır oluşturur .
Biçimlendirmek için, ve özelliklerini border kullanırız . border-width border-style border-color
Margin
Margin elemanın dışındaki boşluktur border ve diğer elemanlar arasında bir boşluk oluşturur.
Değerleri tanımlamak için, ve özelliklerini margin kullanırız. margin-top margin-right margin-bottom margin-left
CSS'de kullanarak Box Model, bileşenlerinin değerlerini değiştirerek bir öğenin boyutunu ve konumunu özelleştirebiliriz.
Örnek:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Yukarıdaki örnekte, sınıfa sahip elemanın .box genişliği 200 piksel ve yüksekliği 100 pikseldir. 20px, 1px kalınlığında padding bir siyah ve 10px'e sahiptir. border margin
Bu değerleri ayarlayarak, web sayfanızda farklı boyut ve aralıklara sahip öğeler oluşturabilirsiniz. öğesini kullanarak Box Model, arabiriminizdeki öğelerin konumu, boyutu ve aralığı üzerinde kontrol sahibi olursunuz.