Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 201 Ders Programı
Sınava Gir

CSS Kutu Modeli

Lisans: Creative Commons 11.12.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

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>

Sınava Gir