Örnekleriyle Birlikte CSS Kutu Modelleri

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

CSS kutu modelleri, web sayfalarının temel bileşenlerinden biridir. Kutu modelleri, her HTML öğesinin içeriğini, kenar boşluklarını, çerçevelerini ve dolgusunu tanımlar. Bu, sayfanın görüntüsünü ve düzenini belirlemek için kullanılır. Bu makalede CSS kutu modelleri hakkında temel bilgiler ve örnekler yer almaktadır.

CSS kutu modelleri, özellikle web tasarımında, görüntüleme ve düzenleme işlevleri için çok önemlidir. Sayfaların kenar boşlukları, çerçeveleri ve dolguları, sayfanın okunabilirliği ve kullanılabilirliği açısından önemli bir rol oynar. CSS kutu modelleri, HTML öğelerinin boyutunu ve yerleşimini belirleyerek, sayfanın görünüşünü ve davranışını yönlendirir.

CSS kutu modelleri, her HTML öğesi için dört temel özellik içerir: içerik, dolgu, kenar boşluğu ve çerçeve. İçerik, öğenin görüntüsünü oluşturan gerçek içeriği temsil eder. Dolgu, içerik etrafında boşluk bırakır ve kenar boşluğundan önce gelir. Kenar boşluğu, öğenin ve kenar çerçevesinin arasındaki boşluktur. Çerçeve, öğenin görüntüsünü çevreleyen dört kenarlı bir çerçeveyi ifade eder.

Kutular, genellikle sıfır veya daha fazla kenar boşluğu, dolgu ve çerçeveyle oluşturulan dikdörtgen şekillerdir. Kutular başka bir kutu içinde yer alabilir ve kutuların içeriği diğer öğeler de olabilir. CSS kutu modelleri, öğelerin boyutlarını ve görünüşlerini kontrol etmek için kullanılır.

CSS kutu modelleri, genişliği, yüksekliği, boyutu ve konumu belirleyen bir dizi özellikte tanımlanır. Bu özellikler, genellikle CSS'in belirli bir özelliği olan kutulara özgüdür.

  1. content: Metin ve resimlerin göründüğü kutunun içeriğidir.
  2. padding: İçeriğin etrafındaki bir alanı temizler. Dolgu şeffaftır.
  3. margin: Sınırın dışındaki bir alanı temizler. Kenar boşluğu şeffaftır.
  4. border: Dolgu ve içeriğin etrafından geçen bir kenarlıktır.

Örnek:


div {
  background-color: white;
  width: 300px;
  border: 15px solid black;
  padding: 50px;
  margin: 20px;
}

HTML Kodu:


<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: white;
  width: 300px;
  border: 15px solid black;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<div>Bu bir kutu örneğidir.</div>

</body>
</html>

Görünüm:

Bu bir kutu örneğidir.

GENİŞLİK VE YÜKSEKLİĞE GÖRE KUTU

Bir elemanın genişliğini ve yüksekliğini tüm tarayıcılarda doğru bir şekilde ayarlamak için kutu modelinin nasıl çalıştığını bilmeniz gerekir.

Önemli: Bir elemanın genişlik ve yükseklik özelliklerini CSS ile ayarladığınızda, sadece içerik alanının genişlik ve yüksekliğini ayarlarsınız. Bir öğenin tam boyutunu hesaplamak için dolgu, kenarlıklar ve kenar boşlukları da eklemelisiniz.

Örneğin bir 350px'e sahip bir div oluşturalım.


//Bu <div> öğesinin toplam genişliği 350px olacaktır://

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Şimdi biraz matematik;

350px oluşturmak istediğimiz div'e genişlik olarak 320px verdik.
padding'e 10px tanımladık. sağ ve sol padding 10px'ten toplamları 20px'e denk gelecek.
border'e ise 5px tanımladık. sağ ve sol border 5px'ten toplamları 10px'e denk gelecek.

ve toplamında 350px'e ulaşmış olacağız, bu sayede tüm tarayıcılarda doğru ayarlayabiliriz.

Eğer yükseklikte 350px vermiş olsaydık, üst ve alt px toplamlarını alacaktık.

Hesaplamalar şu şekilde;

Toplam element genişliği = width + left padding + right padding + left border + right border + left margin + right margin

Toplam element yüksekliği = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Örnek:


<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Toplam Genişlik</h2>

<img src="resim.jpg" width="350" height="263" alt="resim">
<div>Yukarıdaki resim 350px genişliğindedir. Bu öğenin toplam genişliği de 350 pikseldir.</div>

</body>
</html>

Sonuç olarak, CSS kutu modelleri web sayfalarının temel bileşenlerinden biridir ve sayfanın görünümünü ve düzenini belirleyen önemli bir rol oynar. Bu makalede, doğru şekilde kullanıldığında CSS kutu modellerinin nasıl kullanılabileceğine dair örnekler verildi. Web sitelerinizdeki kutuların boyutu, özellikleri ve konumu hakkında daha fazla bilgi edinmek ve web sitenizi optimize etmek için bu konu hakkında daha fazla araştırma yapmanız önerilir.

Sizin İçin Önerdiklerimiz

Blog Resim
CSS’de Grid Nedir ve Nasıl Kullanılır?

CSS

CSS Grid, modern bir web tasarım aracıdır. Web sitesi düzeninin kolaylıkla oluşturulmasına olanak tanır. Bir web sayfasındaki öğeleri..

Devamını Oku
Blog Resim
CSS’de Flexbox Nedir ve Nasıl Kullanılır?

CSS

Günümüz web dünyasında, CSS (Cascading Style Sheets) kullanılarak birçok farklı web sayfası tasarımı oluşturulmaktadır. Inline, block ve float..

Devamını Oku
Blog Resim
Örnekleriyle Birlikte CSS Yazı Formatları

CSS

CSS (Cascading Style Sheets) bir web sayfasının tasarımını belirleyen ve HTML (Hyper Text Markup Language) etiketlerinde yazılmış olan içeriklerin ..

Devamını Oku
Blog Resim
Kullanılmayan CSS Dosyalarının Zararları

CSS

Web tasarımı birçok değişkene bağlıdır ve tasarımın işlevselliğinde rol oynayan birçok faktör vardır. CSS dosyaları, bir web sitesinin tasarımını ve ..

Devamını Oku