Turkcell | Geleceği Yazanlar

201: HTML5 & CSS Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

CSS Kutu Modeli

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : css-model kutu-model margin border padding content height width web-programlama

Tüm CSS elemanları birer kutu olarak düşünülebilir. CSS'te tasarım ve düzenden bahsediliyorsa, "Kutu Modeli" terimi kullanılır. CSS Kutu Modeli esasında HTML bileşenlerinin etrafını saran ve margin (kenar mesafesi), border (sınır), padding (boşluk) ve content (içerikten) oluşan elemanlardan ibarettir.

CSS Kutu Modeli, bize elemanların etrafına bir sınır ekleme (border) ya da elemanlar arasında bir boşluk (padding) tanımlama olanağı sağlar.

Aşağıdaki şema, CSS Kutu Modeli elemanlarını daha iyi kavramanıza yardımcı olacaktır:

Bu şemadaki elemanların açıklamalarına gelecek olursak;

  • Content: Resim ve metnin görüneceği kutunun içeriğidir.
  • Padding: İçerik etrafında bir alanı temizleyerek boşluk oluşturur. Padding daima saydamdır.
  • Border: Boşluk ve içeriğin etrafında yer alan sınır çizgisidir.
  • Margin: Sınırın dışında kalan alandır. Daima saydamdır.
div {
    width: 200px;
    padding: 30px;
    border: 20px solid red;
    padding: 25px;
}

CSS Kutu Modeli elemanlarının bir HTML belgesi içinde nasıl kullandığını görmek için aşağıdaki kodu inceleyebilirsiniz:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: lightpink;
                width: 400px;
                padding: 30px;
                border: 22px solid navy;
                padding: 25px;
            }
        </style>
    </head>
    <body>

        <div>SI VIS PACEM, COLE JUSTITIAM<br>
        EGER BARIS ISTIYORSAN, ADALETI GERCEKLESTIR<br>
        ROMA HUKUKUNUN TEMEL PRENSIBI</div>

    </body>
</html>