Scribd
Unggah
10 tayangan3 halaman

Box Model Dan CSS Reset

Dokumen ini membahas pentingnya CSS Box Model dan CSS Reset dalam web development untuk memastikan tampilan elemen yang konsisten di berbagai browser. CSS Box Model menjelaskan struktur elemen HTML yang terdiri dari content, padding, border, dan margin, sedangkan CSS Reset digunakan untuk menghapus gaya bawaan browser. Penggunaan box-sizing: border-box juga disarankan untuk mempermudah perhitungan ukuran elemen.

Diunggah oleh

habib
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
10 tayangan3 halaman

Box Model Dan CSS Reset

Dokumen ini membahas pentingnya CSS Box Model dan CSS Reset dalam web development untuk memastikan tampilan elemen yang konsisten di berbagai browser. CSS Box Model menjelaskan struktur elemen HTML yang terdiri dari content, padding, border, dan margin, sedangkan CSS Reset digunakan untuk menghapus gaya bawaan browser. Penggunaan box-sizing: border-box juga disarankan untuk mempermudah perhitungan ukuran elemen.

Diunggah oleh

habib
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 3

Box Model dan CSS Reset

CSS Layouting - #6 Box Model _ CSS Reset dalam bahasa


indonesia

CSS Layouting - #6 Box Model & CSS Reset


Dalam dunia web development, memahami CSS Box Model dan CSS Reset sangat penting
untuk memastikan tampilan elemen yang konsisten di berbagai browser. Artikel ini akan
membahas kedua konsep ini secara rinci dalam bahasa Indonesia.

1. CSS Box Model


CSS Box Model adalah konsep fundamental dalam CSS yang menggambarkan bagaimana
elemen HTML dirender di halaman web. Setiap elemen dianggap sebagai sebuah kotak
(box) yang terdiri dari beberapa bagian utama:

Bagian-bagian dalam CSS Box Model

1. Content (Isi) → Bagian utama yang berisi teks atau elemen lain.

2. Padding → Ruang antara content dan border.

3. Border → Garis tepi yang mengelilingi padding dan content.

4. Margin → Ruang kosong di luar border yang memisahkan elemen dari elemen lainnya.

Ilustrasi CSS Box Model

lua

+-----------------------------+ <-- Margin


| ( Border ) |
| +---------------------+ | <-- Padding
| | Content | | <-- Content
| +---------------------+ |
| |
+-----------------------------+

Contoh Kode CSS Box Model

1/3
css

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}

Penjelasan:

Lebar total = width + padding + border + margin


= 200px + (20px * 2) + (5px * 2) + (10px * 2)
= 270px

Tinggi total = 100px + (20px * 2) + (5px * 2) + (10px * 2)


= 170px

Box-Sizing: border-box

Secara default, width dan height hanya menghitung content saja. Jika ingin memasukkan
padding dan border ke dalam perhitungan ukuran, gunakan:

css

.box {
box-sizing: border-box;
}

Dengan box-sizing: border-box , elemen akan tetap berukuran 200px karena padding dan
border sudah termasuk dalam total width/height.

2. CSS Reset
Setiap browser memiliki default style yang berbeda-beda, yang bisa menyebabkan tampilan
tidak konsisten. Oleh karena itu, kita menggunakan CSS Reset untuk menghapus gaya
bawaan browser.

Contoh CSS Reset Sederhana

css

2/3
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Kode ini mengatur semua elemen ( * ) agar tidak memiliki margin dan padding default,
serta menggunakan box-sizing: border-box untuk konsistensi ukuran.

CSS Reset Lebih Lanjut (Normalize.css)

Selain reset sederhana, ada juga Normalize.css yang lebih canggih karena mempertahankan
gaya elemen penting seperti tombol, heading, dan form agar tetap terlihat alami.

Kesimpulan
CSS Box Model menentukan bagaimana ukuran elemen dihitung, termasuk content,
padding, border, dan margin.

CSS Reset digunakan untuk menghapus gaya bawaan browser agar tampilan lebih
konsisten.

Menggunakan box-sizing: border-box dapat mempermudah perhitungan ukuran


elemen.

Sekian pembahasan mengenai CSS Box Model & CSS Reset. Semoga bermanfaat! 🚀

3/3

Anda mungkin juga menyukai