Kutu modeli ile ilgili CSS özellikleri

Articles

CSS'e Giriş

Bu makale, kutu modeli ile ilgili CSS özelliklerini açıklar.

Genişlik, yükseklik ve dış boşluk gibi özelliklerin kullanım alanları ve sözdizimi hakkında bilgi edinebilirsiniz.

YouTube Video

Önizleme için HTML

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

Kutu Modeli ile İlgili

`width` ve `height` Özellikleri

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

width ve height özellikleri, bir öğenin genişliğini ve yüksekliğini belirtmek için kullanılan CSS özellikleridir. Bunlar özellikle blok elemanların, resimlerin, videoların vb. boyutlarını ayarlarken kullanılır.

width-height-fixed sınıfında genişlik ve yükseklik için sabit değerler belirtilir.
width-height-percent sınıfında genişlik ve yükseklik için yüzde değerleri belirtilir.

Belirtilen Değerler

width ve height özellikleri aşağıdaki değerlere sahip olabilir.

auto: Varsayılan boyut. Boyutu, üst öğeye göre otomatik olarak ayarlar.
Sabit değerler: Pikseller, yüzdeler veya göreli birimlerde sabit bir genişlik belirtir.(ex: 100px, 50%, 10rem)
- Örneğin, 250px öğenin boyutunu 250 piksel olarak ayarlar, 50% ise üst öğenin boyutunun %50'si olarak ayarlar.
min-content: İçeriğin minimum boyutuna uyar.
max-content: İçeriğin maksimum boyutuna uyar.
fit-content: Öğenin boyutunu, içeriğin boyutuna uygun şekilde ayarlar.

Minimum ve Maksimum Değerlerin Belirlenmesi

min-width, max-width, min-height ve max-height, bir öğenin genişliği ve yüksekliği ile ilgili boyut kısıtlamalarını ayarlamak için kullanılan CSS özellikleridir. Bunları kullanarak, bir öğenin belirli bir boyut aralığında kalmasını sağlayabilirsiniz.

`margin` ve `padding` özellikleri

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin ve padding, box modelinde elemanların dış ve iç boşluklarını kontrol etmek için CSS'de kullanılan özelliklerdir. Elemanlar arasındaki boşluğu ayarlamak ve görünümleri düzenlemek için kullanılırlar.

margin-padding sınıfında hem margin hem de padding belirtilmiştir. Kesin sınırın dışında margin boşluğu ve kesin sınırın içinde padding boşluğu vardır.
margin-only sınıfında yalnızca margin belirtilmiştir. Mavi alanın, kesin sınırın içinde padding boşluğu olmadığından, margin-padding sınıfına kıyasla daha küçük olduğunu görebilirsiniz.
no-margin sınıfında hem margin hem de padding 0 olarak ayarlanmıştır. Mavi alanın tamamen sola itildiğini görebilirsiniz, çünkü kesin sınırın dışında margin boşluğu yoktur.

Bu şekilde, margin özelliği bir elemanın dış boşluğunu ayarlayarak elemanlar arasındaki mesafeyi düzenler. Diğer yandan, padding özelliği, bir elemanın iç boşluğunu ayarlayarak içerik ile sınır arasındaki mesafeyi düzenler.

`margin` özelliği

margin özelliği, bir elemanın dış boşluğunu (margin) ayarlar. Birbirine bitişik elemanlar arasında boşluk oluşturmak için kullanılır. Aşağıdaki değerler belirtilebilir:.
Sabit değerler: Margin boyutunu piksel, göreceli birimler (em, rem) veya yüzde olarak belirtebilirsiniz.(ex: 10px, 1em, 5%)
auto: Blok elemanları ortalamak için kullanışlıdır. Genişlik belirtildiğinde, sol ve sağ marginleri otomatik olarak ayarlar.
Pozitif ve negatif değerler: Pozitif değerler boşluğu genişletirken, negatif değerler elemanları birbirine yaklaştırır.

Kısaltma notasyonu:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

margin özelliği bir ila dört değer alabilir.

Tek değer: Tüm kenarlara uygulanır.
İki değer: İlki üst ve alta, ikincisi sol ve sağa uygulanır.
Üç değer: Üst, sol ve sağ, alt sırasıyla uygulanır.
Dört değer: Üst, sağ, alt, sol sırasıyla uygulanır.

`padding` özelliği

Fonksiyon:

padding özelliği, bir öğenin iç boşluğunu (padding) ayarlar. Bir öğenin içeriği ile kenarlığı arasına boşluk oluşturmak için kullanılır. Aşağıdaki değerler belirtilebilir:.
Sabit değerler: Padding boyutunu belirtir.(ex: 10px, 1em, 5%)
Negatif değerler kullanılamaz. Padding değerleri yalnızca pozitif sayılar olarak belirtilebilir.

Kısaltma notasyonu:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

margin gibi, birden dört değere kadar belirtebilirsiniz.

Tek değer: Tüm kenarlara uygulanır.
İki değer: İlki üst ve alta, ikincisi sol ve sağa uygulanır.
Üç değer: Üst, sol ve sağ, alt sırasıyla uygulanır.
Dört değer: Üst, sağ, alt, sol sırasıyla uygulanır.

`box-sizing` özelliği

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing, bir öğenin genişliği ve yüksekliğinin nasıl hesaplandığını kontrol eden bir CSS özelliğidir.

content-box sınıfında, öğenin genişliği 360px'dir. width 300px'dir, sol ve sağ padding toplamı 40px ve sol ve sağ border toplamı 20px olup, toplamda 360px eder.
border-box içinde, öğenin genişliği 300px'dir. padding ve border, belirtilen width değeri içinde yer alır.

`box-sizing` değerleri

box-sizing için temel olarak iki değer vardır: content-box ve border-box. content-box varsayılan değerdir.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

content-box belirtildiğinde, yalnızca içeriğin genişliği ve yüksekliği width ve height ile ayarlanır. Son boyutu belirlemek için padding ve border eklenir. Başka bir deyişle, width ve height yalnızca içerik alanını ifade eder.

Bu örnekte, belirtilen width 200px'dir, ancak sol ve sağ padding ve border genişlikleri eklendiğinde öğenin nihai gerçek genişliği 260px'dir.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

border-box belirtildiğinde, width ve height değerleri padding ve border dahil edilerek hesaplanır. Başka bir deyişle, belirtilen width ve height, içerik, padding ve border toplam boyutu olur.

Bu durumda, belirtilen width 200px olup, padding ve border da dahil olduğundan, öğenin nihai gerçek genişliği 200px olarak kalır. padding ve border bunun içinde ayarlanır.

`box-sizing` farklılıklarının özeti

Özellik	Hesaplama Yöntemi	Gerçek Genişlik Hesabı
`content-box` (varsayılan)	`width` yalnızca içeriği ifade eder. `padding` ve `border` eklenir.	`width` + `padding` + `border`
`border-box`	`width` her şeyi kapsar (içerik, `padding`, `border` dahil)	Belirtilen `width` olduğu gibi kullanılır.

`box-sizing` avantajları

border-box kullanımı düzeni sabitleştirir. padding veya border eklemek belirlenen boyutu değiştirmez, hesaplamaları basitleştirir.
Esnek düzenler oluştururken faydalıdır. Responsive tasarımlarda veya karmaşık düzenlerde, beklenmedik boyut dalgalanmalarını önlemek için sıkça border-box kullanılır.

`border-box` küresel olarak nasıl uygulanır

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

CSS'i bu şekilde ayarlayarak, beklenmeyen boyut değişikliklerini önlemek için border-box'ı tüm öğelere uygulayabilirsiniz.

Özet

box-sizing, bir öğenin width ve height değerlerine padding ve border'ın dahil edilip edilmeyeceğini kontrol eder.
border-box kullanımı boyut hesaplamalarını kolaylaştırır ve responsive tasarım için uygundur.

`visibility` özelliği

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

visibility özelliği, öğeleri göstermek veya gizlemek için kullanılır ancak display özelliğinden farklı olarak, öğe gizlense bile düzeni etkiler. Bu yalnızca öğeyi gizler, orijinal pozisyonunu ve boyutunu korur, diğer öğelerin düzenini etkilemez.

Temel Sözdizimi

1element {
2    visibility: value;
3}

value: Öğenin görünürlüğünü belirten bir değer.

Değer Türleri

visibility özelliği aşağıdaki değerlere ayarlanabilir:.

`visible`

visible belirtildiğinde öğe görüntülenir. Bu varsayılan değerdir.

`hidden`

hidden belirtildiğinde öğe gizlenir ancak düzen alanı korunur.

`collapse`

collapse genellikle tablo satırları veya sütunları için kullanılır. Öğe görünmez hale gelir ve alanı da göz ardı edilir. Tablo satırlarına veya sütunlarına uygulandığında, gizli satır veya sütunlar düzen düzeninden tamamen kaldırılır.
Ancak, tablo elemanları hariç normal blok veya satır içi elemanlar üzerinde kullanıldığında, hidden gibi davranır ve düzen alanı korunur.

`inherit`

inherit belirtildiğinde, üst öğeden visibility özelliği değeri miras alınır.

`visibility` ve `display` arasındaki farklar

visibility ve display arasında aşağıdaki farklar bulunmaktadır.

visibility: hidden öğeyi gizler ancak alanını ve düzenini korur.
display: none, öğeyi düzen düzeninden tamamen kaldırır, diğer öğelerin bu alanı doldurmasına izin verir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Kod Görüntüleme ve Alıntılar için CSS Özellikleri Arka plan ile ilgili CSS özellikleri

Kutu modeli ile ilgili CSS özellikleri

YouTube Video

Önizleme için HTML

Kutu Modeli ile İlgili

width ve height Özellikleri

Belirtilen Değerler

Minimum ve Maksimum Değerlerin Belirlenmesi

margin ve padding özellikleri

margin özelliği

Kısaltma notasyonu:

padding özelliği

Fonksiyon:

Kısaltma notasyonu:

box-sizing özelliği

box-sizing değerleri

content-box

border-box

box-sizing farklılıklarının özeti

box-sizing avantajları

border-box küresel olarak nasıl uygulanır

Özet

visibility özelliği

Temel Sözdizimi

Değer Türleri

visible

hidden

collapse

inherit

visibility ve display arasındaki farklar

YouTube Video

`width` ve `height` Özellikleri

`margin` ve `padding` özellikleri

`margin` özelliği

`padding` özelliği

`box-sizing` özelliği

`box-sizing` değerleri

`content-box`

`border-box`

`box-sizing` farklılıklarının özeti

`box-sizing` avantajları

`border-box` küresel olarak nasıl uygulanır

`visibility` özelliği

`visible`

`hidden`

`collapse`

`inherit`

`visibility` ve `display` arasındaki farklar