CSS Kutu Modeli (Box Model) – Tasarım Kodlama
CSS

CSS Kutu Modeli (Box Model)

Tüm HTML elemanları kutu olarak kabul edilebilir. CSS’de, tasarım ve düzen hakkında konuşurken ‘kutu modeli’ (box model)  terimi kullanılır.

CSS Box-Model  kenar boşlukları (margin), kenarlıklar (border), dolgu (padding) ve  içerikten (content) oluşur. Aşağıdaki resim kutu modelini göstermektedir.

Önemli Not: Bir öğenin CSS ile genişlik ve yükseklik özelliklerini ayarladığınızda, yalnızca içerik alanının genişliğini ve yüksekliğini ayarlarsınız. Bir öğenin tam boyutunu hesaplamak için dolgu, kenarlık ve kenar boşlukları eklemeniz gerekir. 

Örneğin aşağıdaki div için yazılan CSS kodlarını inceleyerek div öğesinin toplam genişliğini hesaplayalım.

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

 

Örnek:

 

Yorum bırak