Model Kotak CSS Dijelaskan Dengan Contoh

Jika Anda berencana untuk membangun tata letak halaman web yang mengagumkan, Anda harus tahu tentang margin, batas, padding, dan konten. Setiap elemen dalam desain web, apakah itu gambar atau teks, menggunakan kotak dengan properti ini. Anda dapat dengan mudah membangun tata letak yang rumit dengan bermain-main dengan model kotak. Dalam artikel ini, kami akan membedah Model Kotak CSS dan menunjukkan cara menggunakan properti ini dengan contoh praktis.

Apa itu Model Kotak CSS?

Model kotak CSS adalah standar yang dibuat oleh Konsorsium World Wide Web. Ini menggambarkan semua elemen dalam dokumen HTML sebagai kotak persegi panjang dengan dimensinya sendiri. Kotak-kotak ini berisi area konten dan area margin, perbatasan, dan padding opsional di sekitarnya. Jadi, mari kita jelajahi bagian-bagian dari kotak CSS.

Mari kita temukan empat lapisan model kotak CSS.

Lapisan Pertama: Konten

Area konten berisi konten utama dari elemen yang dapat berupa gambar, teks, atau konten media dalam bentuk apa pun. Anda dapat memodifikasi dimensi elemen level blok menggunakan tinggi dan lebar properti.

Lapisan Kedua: Padding

Padding adalah ruang antara kotak konten dan kotak perbatasannya. Meskipun berada di sekitar konten Anda sebagai spasi, Anda dapat menggunakan warna latar belakang untuk memvisualisasikan perbedaannya. Anda bisa melamar padding-top, padding-kanan, padding-bottom, dan padding-kiri properti untuk mengubah ruang.

Lapisan Ketiga: Perbatasan

Perbatasan membungkus konten dan area padding. Anda dapat mengubah ukuran dan gaya perbatasan menggunakan lebar batas, gaya perbatasan, dan perbatasan-warna properti.

Lapisan keempat: Margin

Lapisan terakhir dari model kotak banyak digunakan untuk menghasilkan ruang antar elemen. Margin membungkus konten, padding, dan area perbatasan. Anda dapat gunakan margin-atas,margin-kanan, margin-bawah, dan margin-kiri properti. Anda juga dapat memberikan properti margin nilai negatif atau mobil untuk mencapai beberapa teknik penempatan yang mengagumkan.

Pengaturan Proyek untuk Model Kotak CSS

Mari buat proyek mini untuk mendemonstrasikan model kotak dasar dengan kotak konten dan properti padding, border, dan margin. Anda dapat menggunakan teks, gambar, atau konten media. Kami akan mulai dengan memastikan bahwa itu terstruktur dengan benar.

Struktur Dengan HTML

Keluaran:

Anda dapat menggunakan fitur bawaan browser Anda, seperti Alat Pengembang Chrome, untuk melihat apa yang terjadi. Kami menggunakan dua gambar dari Unsplash. Untuk mempermudah, kami akan menyembunyikan gambar ponsel cerdas menggunakan tampilan: tidak ada; sampai kita membutuhkannya nanti.

Menata Gaya Menggunakan CSS

/*************************
GAYA DASAR
*************************/
* {
margin: 0 piksel;
bantalan: 0px;
}
tubuh {
tampilan: fleksibel;
arah fleksibel: baris;
} 
.menampilkan {
tampilan: tidak ada !penting;
}

Sekarang, mari menata kotak konten kita. Pertama, kita akan mengatur tinggi dan lebar dari gambar. Juga, memberikan warna latar belakang membantu dalam visualisasi yang lebih baik. Jadi, mari kita lakukan.

/*************************
KOTAK ISI
*************************/
.konten-kotak {
tampilan: fleksibel;
arah fleksibel: baris;
justify-content: pusat;
align-item: tengah;
/* Menata kotak konten menggunakan properti tinggi dan lebar */
warna-latar belakang: #fdf;
tinggi: 20em;
lebar: 30em;
}

Berikan Ruang Konten untuk Bernapas Dengan Padding

Anda dapat mengatur padding-top, padding-kanan, padding-bottom, dan padding-kiri properti secara individual atau menggunakan singkatan. Coba gunakan steno jika memungkinkan, karena dapat menghemat waktu Anda. Mari kita lihat cara kerja padding.

 /*************************
LAPISAN
*************************/
/* Menerapkan bantalan */
bantalan-atas: 5em;
padding-kanan: 2em;
bantalan-bawah: 8em;
padding-kiri: 2em;
/* Singkatan pengisi */
/* atas/kanan/bawah/kiri */
bantalan: 5em 2em 8em 2em;
/* atas/horisontal/bawah */
bantalan: 5em 2em 8em;

Keluaran:

Gambar Garis Di Sekitar Padding Menggunakan Border

Saat menerapkan properti perbatasan, pastikan Anda menggunakan perbatasan-warna properti untuk memberikan perbatasan warna yang berbeda dari latar belakang. Anda dapat memilih gaya perbatasan baik secara individu atau sekaligus dengan menggunakan properti singkatan. Hal yang sama berlaku untuk lebar batas Properti.

Anda juga dapat mengatur radius batas untuk memberikan kotak sudut bulat dengan jari-jari di px, rem, em, atau persen.

 /*************************
BERBATASAN
*************************/
/* Menerapkan properti perbatasan */
/* Mengatur warna tepi */
warna batas: rgb (148, 234, 255);
/* Pilih gaya batas */
border-top-style: solid;
border-right-style: putus-putus;
border-bottom-style: alur;
gaya perbatasan-kiri: punggungan;
/* singkatan bergaya border */
/* atas/kanan/bawah/kiri */
gaya perbatasan: punggungan alur putus-putus yang solid;
/* Mengatur lebar batas */
batas-atas-lebar: 4em;
batas-kanan-lebar: 2em;
batas-bawah-lebar: 2em;
batas-kiri-lebar: 2em;
/* singkatan lebar batas*/
/* atas/kanan/bawah/kiri */
lebar batas: 4em 2em 2em 2em;
/* atas/horisontal/bawah */
lebar batas: 4em 2em 2em;
/* singkatan properti perbatasan */
/* batas: 4em solid rgb (148, 234, 255); */
/* Mengatur radius batas */
batas-radius: 5em;
batas-radius: 20%;

Keluaran:

Tambahkan Spasi Antar Kotak Dengan Margin

Anda dapat memusatkan kotak secara horizontal menggunakan margin: 0 otomatis, asalkan memiliki lebar yang pasti.

 /*************************
BATAS
*************************/
/* Menerapkan properti margin */
margin-atas: 4em;
margin-kanan: 5em;
margin-bawah: 3em;
margin-kiri: 5em;
/* Singkatan margin */
/* atas/kanan/bawah/kiri */
margin: 4em 5em 3em 5em;
/* atas/horisontal/bawah */
margin: 4em 5em 3em;
/* Menggunakan margin otomatis */
margin: 3em otomatis;

Keluaran:

Anda dapat menentukan properti margin menggunakan satu, dua, tiga, atau empat nilai. Nilainya bisa berupa panjang, persentase, atau kata kunci seperti mobil. Mari kita pahami cara kerjanya:

• Ketika Anda menentukan hanya satu nilai, itu berarti keempat sisi akan memiliki margin yang sama.
• Saat Anda menentukan dua nilai, nilai pertama menandakan margin-atas dan margin-bawah sedangkan nilai kedua menentukan margin-kanan dan margin-kiri.
• Saat Anda menentukan tiga nilai, yang pertama dan terakhir berlaku untuk margin-atas dan margin-bawah masing-masing. Nilai tengah adalah untuk area horizontal, yaitu, margin-kanan dan margin-kiri.
• Saat Anda menentukan keempat nilai, nilai tersebut diterapkan ke atas, kanan, bawah, dan kiri (dalam urutan searah jarum jam).

Perhatikan bahwa Anda juga dapat menggunakan pintasan ini untuk properti padding dan border.

Lihat juga: Lembar Cheat Properti CSS3 Esensial

Apakah Anda pernah menggunakan margin negatif? Untuk memvisualisasikannya mari kita hapus tampilan: tidak ada untuk menampilkan gambar kedua kita, lalu atur margin negatif.

/* .menampilkan {
tampilan: tidak ada !penting;
} */
.konten-kotak {
tampilan: fleksibel;
arah fleksibel: baris;
align-item: tengah;
warna-latar belakang: #fdf;
tinggi: 20em;
lebar: 30em;
bantalan: 5em 2em 8em;
gaya perbatasan: punggungan alur putus-putus yang solid;
lebar batas: 4em 2em 2em;
batas-radius: 20%;
/* Menggunakan margin negatif */
margin: 3em -20em 3em 5em;
}

Keluaran:

Model Kotak: Membuat Situs Web Pixel Sempurna

Model kotak memungkinkan Anda menentukan ruang antar elemen, menambahkan batas, dan dengan mudah membangun tata letak yang tampak rumit. Anda dapat segera memulai untuk membuat situs web yang luar biasa. Sementara itu, Anda dapat menjelajahi kotak perbatasan properti secara detail dan bermain-main dengan kode di atas.

Anda harus memahami bahwa ada metode lain untuk meletakkan konten di CSS. Ini termasuk CSS Grid dan CSS Flexbox. Setelah Anda merasa nyaman dengan model kotak, Anda harus terus belajar tentang alternatif ini.

Tutorial CSS Flexbox: Dasar-dasar

Posisikan elemen HTML Anda dengan sempurna dengan bantuan CSS Flexbox.

Baca Selanjutnya

Tentang Penulis