Properti CSS yang terkait dengan model kotak

Articles

Artikel ini menjelaskan properti CSS yang terkait dengan model kotak.

Anda dapat mempelajari cara penggunaan dan sintaks properti seperti width, height, dan margin.

YouTube Video

HTML untuk Pratinjau

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>

Terkait Model Kotak

Properti `width` dan `height`

 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}

Properti width dan height adalah properti CSS yang digunakan untuk menentukan lebar dan tinggi suatu elemen. Ini terutama digunakan saat mengatur ukuran elemen blok, gambar, video, dll.

Dalam kelas width-height-fixed, nilai tetap ditentukan untuk lebar dan tinggi.
Dalam kelas width-height-percent, nilai persentase ditentukan untuk lebar dan tinggi.

Nilai-nilai yang dapat ditentukan

Properti width dan height dapat memiliki nilai-nilai berikut.

auto: Ukuran bawaan. Secara otomatis menyesuaikan ukuran relatif terhadap elemen induk.
Nilai tetap: Menentukan lebar tetap dalam piksel, persentase, atau satuan relatif.(ex: 100px, 50%, 10rem)
- Sebagai contoh, 250px mengatur ukuran elemen menjadi 250 piksel, dan 50% mengaturnya menjadi 50% dari ukuran elemen induk.
min-content: Menyesuaikan dengan ukuran minimum konten.
max-content: Menyesuaikan dengan ukuran maksimum konten.
fit-content: Menyesuaikan ukuran elemen secara tepat berdasarkan ukuran konten.

Menentukan Nilai Minimum dan Maksimum

min-width, max-width, min-height, dan max-height adalah properti CSS yang digunakan untuk mengatur batasan ukuran terkait lebar dan tinggi suatu elemen. Dengan menggunakan ini, Anda dapat memastikan bahwa elemen tetap berada dalam rentang ukuran tertentu.

Properti `margin` dan `padding`

 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 dan padding adalah properti yang digunakan dalam CSS untuk mengatur jarak luar dan dalam elemen dalam model kotak. Properti ini digunakan untuk menyesuaikan jarak antara elemen dan merapikan tampilan.

Dalam kelas margin-padding, baik margin maupun padding sudah ditentukan. Ada ruang margin di luar batas solid dan ruang padding di dalam batas solid.
Dalam kelas margin-only, hanya margin yang ditentukan. Anda dapat melihat bahwa area biru lebih kecil dibandingkan dengan kelas margin-padding karena tidak ada ruang padding di dalam batas solid.
Dalam kelas no-margin, baik margin maupun padding diatur ke 0. Anda dapat melihat bahwa area biru terdorong sepenuhnya ke kiri karena tidak ada ruang margin di luar batas solid.

Dengan cara ini, properti margin mengatur ruang luar suatu elemen, menyesuaikan jarak antar elemen. Di sisi lain, properti padding mengatur ruang dalam suatu elemen, menyesuaikan jarak antara konten dan batas.

Properti `margin`

Properti margin mengatur ruang luar (margin) elemen. Properti ini digunakan untuk membuat ruang antara elemen yang berdekatan. Nilai-nilai berikut dapat ditentukan:.
Nilai tetap: Anda dapat menentukan ukuran margin dalam piksel, satuan relatif (em, rem), atau persentase.(ex: 10px, 1em, 5%)
auto: Berguna untuk memusatkan elemen blok. Ketika lebar ditentukan, margin kiri dan kanan akan secara otomatis disesuaikan.
Nilai positif dan negatif: Nilai positif memperluas ruang, sedangkan nilai negatif mendekatkan elemen satu sama lain.

Notasi singkat:

 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}

Properti margin dapat memiliki satu hingga empat nilai.

Satu nilai: Berlaku untuk semua sisi.
Dua nilai: Yang pertama berlaku untuk atas dan bawah, yang kedua untuk kiri dan kanan.
Tiga nilai: Berlaku dalam urutan atas, kiri dan kanan, bawah.
Empat nilai: Berlaku dalam urutan atas, kanan, bawah, kiri.

Properti `padding`

Fungsi:

Properti padding mengatur ruang dalam (padding) dari sebuah elemen. Ini digunakan untuk membuat ruang antara konten dan batas elemen. Nilai-nilai berikut dapat ditentukan:.
Nilai tetap: Menentukan ukuran padding.(ex: 10px, 1em, 5%)
Nilai negatif tidak dapat digunakan. Nilai padding hanya dapat ditentukan sebagai angka positif.

Notasi singkat:

 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}

Seperti margin, Anda dapat menentukan dari satu hingga empat nilai.

Satu nilai: Berlaku untuk semua sisi.
Dua nilai: Yang pertama berlaku untuk atas dan bawah, yang kedua untuk kiri dan kanan.
Tiga nilai: Berlaku dalam urutan atas, kiri dan kanan, bawah.
Empat nilai: Berlaku dalam urutan atas, kanan, bawah, kiri.

Properti `box-sizing`

 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 adalah properti CSS yang mengatur bagaimana lebar dan tinggi sebuah elemen dihitung.

Dalam kelas content-box, lebar elemen adalah 360px. width adalah 300px, dengan padding kiri dan kanan berjumlah 40px dan border kiri dan kanan berjumlah 20px, membuat totalnya 360px.
Dalam border-box, lebar elemen adalah 300px. padding dan border termasuk dalam width yang ditentukan.

Nilai dari `box-sizing`

Ada dua nilai utama untuk box-sizing: content-box dan border-box, dengan content-box sebagai nilai default.

`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*/

Saat content-box ditentukan, hanya lebar dan tinggi konten yang diatur oleh width dan height. padding dan border ditambahkan untuk menentukan ukuran akhir. Dengan kata lain, width dan height hanya merujuk pada area konten.

Dalam contoh ini, width yang ditentukan adalah 200px, tetapi dengan menambahkan lebar padding dan border kiri dan kanan, lebar aktual akhir elemen adalah 260px.

`border-box`

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

Saat border-box ditentukan, width dan height dihitung termasuk padding dan border. Dengan kata lain, width dan height yang ditentukan menjadi ukuran total dari konten, padding, dan border.

Dalam kasus ini, width yang ditentukan adalah 200px, dan karena padding dan border juga dimasukkan, lebar akhir elemen tetap 200px. padding dan border disesuaikan di dalamnya.

Ringkasan perbedaan `box-sizing`

Properti	Metode Perhitungan	Perhitungan Lebar Aktual
`content-box` (default)	`width` hanya mengacu pada konten. `padding` dan `border` ditambahkan.	`width` + `padding` + `border`
`border-box`	`width` mencakup semuanya (termasuk konten, `padding`, `border`)	`width` yang ditentukan digunakan apa adanya.

Keuntungan dari `box-sizing`

Menggunakan border-box menstabilkan tata letak. Menambahkan padding atau border tidak mengubah ukuran yang ditentukan, sehingga perhitungan menjadi sederhana.
Ini berguna saat membuat tata letak yang fleksibel. Dalam desain responsif atau tata letak yang kompleks, border-box sering digunakan untuk menghindari fluktuasi ukuran yang tidak terduga.

Cara menerapkan `border-box` secara global

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

Dengan mengatur CSS seperti ini, Anda dapat menerapkan border-box pada semua elemen untuk menghindari perubahan ukuran yang tidak terduga.

Ringkasan

box-sizing mengatur apakah padding dan border termasuk dalam width dan height elemen.
Menggunakan border-box membuat perhitungan ukuran menjadi lebih mudah dan cocok untuk desain responsif.

Properti `visibility`

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

Properti visibility digunakan untuk menampilkan atau menyembunyikan elemen, tetapi tidak seperti properti display, ini memengaruhi tata letak meskipun elemen disembunyikan. Ini hanya menyembunyikan elemen, mempertahankan posisi dan ukurannya tanpa memengaruhi tata letak elemen lainnya.

Sintaks Dasar

1element {
2    visibility: value;
3}

value: Sebuah nilai yang menentukan visibilitas elemen.

Jenis nilai

Properti visibility dapat diatur dengan nilai-nilai berikut:.

`visible`

Menentukan visible akan menampilkan elemen. Ini adalah nilai default.

`hidden`

Menentukan hidden akan menyembunyikan elemen tetapi ruang tata letaknya akan tetap disimpan.

`collapse`

collapse terutama digunakan untuk baris atau kolom tabel. Elemen menjadi tidak terlihat dan ruangnya juga diabaikan. Ketika diterapkan pada baris atau kolom tabel, baris atau kolom yang disembunyikan sepenuhnya dihapus dari tata letak.
Namun, ketika digunakan pada elemen blok atau inline biasa, kecuali elemen tabel, ini berperilaku seperti hidden dan ruang tata letak tetap dipertahankan.

`inherit`

Menentukan inherit akan mewarisi nilai properti visibility dari elemen induk.

Perbedaan antara `visibility` dan `display`

Berikut adalah perbedaan antara visibility dan display.

visibility: hidden menyembunyikan elemen tetapi mempertahankan ruangnya dan tata letaknya.
display: none sepenuhnya menghapus elemen dari tata letak, memungkinkan elemen lain untuk mengisi ruang tersebut.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS untuk Tampilan Kode dan Kutipan Properti CSS Terkait Latar Belakang

Properti CSS yang terkait dengan model kotak

YouTube Video

HTML untuk Pratinjau

Terkait Model Kotak

Properti width dan height

Nilai-nilai yang dapat ditentukan

Menentukan Nilai Minimum dan Maksimum

Properti margin dan padding

Properti margin

Notasi singkat:

Properti padding

Fungsi:

Notasi singkat:

Properti box-sizing

Nilai dari box-sizing

content-box

border-box

Ringkasan perbedaan box-sizing

Keuntungan dari box-sizing

Cara menerapkan border-box secara global

Ringkasan

Properti visibility

Sintaks Dasar

Jenis nilai

visible

hidden

collapse

inherit

Perbedaan antara visibility dan display

YouTube Video

Properti `width` dan `height`

Properti `margin` dan `padding`

Properti `margin`

Properti `padding`

Properti `box-sizing`

Nilai dari `box-sizing`

`content-box`

`border-box`

Ringkasan perbedaan `box-sizing`

Keuntungan dari `box-sizing`

Cara menerapkan `border-box` secara global

Properti `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Perbedaan antara `visibility` dan `display`