Scribd
Unggah
10 tayangan3 halaman

Memahami Box Model dalam CSS

Box Model dalam CSS adalah konsep yang mengatur tata letak elemen HTML sebagai kotak yang terdiri dari empat bagian: Content, Padding, Border, dan Margin. Setiap bagian memiliki fungsi spesifik dalam menentukan ruang dan tampilan elemen di halaman web. Memahami Box Model sangat penting untuk mengatur tampilan elemen secara efektif.

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

Memahami Box Model dalam CSS

Box Model dalam CSS adalah konsep yang mengatur tata letak elemen HTML sebagai kotak yang terdiri dari empat bagian: Content, Padding, Border, dan Margin. Setiap bagian memiliki fungsi spesifik dalam menentukan ruang dan tampilan elemen di halaman web. Memahami Box Model sangat penting untuk mengatur tampilan elemen secara efektif.

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

Box Model CSS

CSS Layouting - 4 box model dalam bahasa indonesia

4 Box Model dalam CSS (Model Kotak dalam CSS)


Dalam CSS, Box Model adalah konsep dasar yang digunakan untuk mengatur tata letak
elemen di dalam halaman web. Setiap elemen HTML dianggap sebagai sebuah kotak yang
terdiri dari 4 bagian utama:

1. Content (Konten)

Ini adalah bagian utama dari elemen yang berisi teks, gambar, atau konten lainnya.

Contoh: Jika kita memiliki <p>Hello World</p> , teks "Hello World" berada di dalam
area content.

2. Padding (Bantalan)

Ruang antara content dan border.

Padding dapat diberi warna latar belakang jika elemen memiliki background-color.

Contoh:
css

p {
padding: 20px;
}

Ini akan memberi jarak 20px di dalam batas elemen sebelum border dimulai.

3. Border (Garis Batas)

Garis yang mengelilingi content dan padding.

Border bisa diatur warnanya, ketebalannya, dan jenis garisnya (solid, dashed,
dotted, dll.).

Contoh:
css

p {
border: 2px solid black;
}

Ini akan membuat garis hitam di sekeliling elemen dengan ketebalan 2px.

1/3
4. Margin (Jarak Luar)

Ruang antara elemen ini dengan elemen lainnya di sekitarnya.

Tidak memiliki warna latar belakang.

Contoh:
css

p {
margin: 30px;
}

Ini akan memberi jarak 30px antara elemen <p> dengan elemen lainnya.

Diagram Box Model:

lua

+--------------------------------+
| Margin (Luar) |
| +------------------------+ |
| | Border (Batas) | |
| | +------------------+ | |
| | | Padding (Dalam) | | |
| | | +------------+ | | |
| | | | Content | | | |
| | | +------------+ | | |
| | +------------------+ | |
| +------------------------+ |
+--------------------------------+

Contoh Penggunaan dalam CSS:

css

.box {
width: 200px;
height: 100px;
background-color: lightblue;
padding: 20px;
border: 5px solid blue;

2/3
margin: 30px;
}

Kode di atas akan membuat elemen dengan:


✅ Lebar 200px & Tinggi 100px
✅ Padding 20px (menambah ruang di dalam border)
✅ Border 5px solid berwarna biru
✅ Margin 30px (menambah jarak dengan elemen lain)
Dengan memahami Box Model, kita bisa lebih mudah mengatur tampilan elemen di dalam
halaman web! 🚀

3/3

Anda mungkin juga menyukai