thumbnail

CSS Kutu Modeli (CSS Box Model)

Merhaba şimdi sıra geldi CSS Kutu Modeli Nedir? (CSS Box Model Nedir?) sorumuzu cevaplandırmaya 😀

CSS’de her bir öğe bir kutu oluşturur. Eğer konu CSS’de tasarım ve düzense “Kutu Modeli” terimi kullanılır. CSS Kutu Modeli HTML bileşenlerini saran margin (kenar mesafesi), border (sınır) ,padding (boşluk) ve content (içerik) elemanlarından oluşur.

Kutu Modeli, elemanların etrafına sınır (border) eklememize ve elemanlar arasındaki boşluğu (padding) tanımlamıza olanak sağlar.

CSS Kutu Modelini aşağıdaki şema ile açıklayabiliriz.

 

Bu şemadaki elemanları tanımlayacak olursak;

  • Margin: Kenar mesafesidir. Sınırın dışında kalır. Saydamdır.
  • Border: Boşluk ve içeriğin etrafını saran sınır çizgisidir.
  • Padding: İçerik etrafında boşluk oluşturur.
  • Content: İçerik(resim,metin vb.) kısmını oluşturan kutudur.

Kutu Modeli elemanlarını tanımlamak için bir CSS kodu yazalım.


div {

width: 300px;

padding: 50 px;

border: 30 px solid blue;

padding: 25 px;

}

 

 

 

4 Comments

  1. bu tarz yazılımcı arkadaşlar yazıyor bir şey soruyoruz mesela header bölümüne yapıştır diyor :)) ahahaaha sağol onu google da söylüyor bilsem yaparım sizin bayağı aydınlatıcı

  2. Bilgilendirici yazılarınız için teşekkür ederim. CSS menüleri hep merak ettiğim bir konu olmuştur. Web tasarım derslerinde gördüğüm ancak unuttuğum bir konu..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir