Apa Itu Box Model

Apa itu Box Model?
Setiap elemen HTML ditampilkan dalam bentuk box (kotak). Jika diperhatikan, sebuah website umumnya
terbagi menjadi beberapa area. Mulai dari menu di bagian atas, isi konten di bagian tengah, iklan di sisi
kanan, sampai credit dan info kontak di bagian paling bawah. Berikut contoh website yang menggunakan
box model:
Memang tidak semua website didesain seperti itu. Penempatannya bisa disesuaikan dengan kebutuhan dan
gaya yang diinginkan. Tapi dari ilustrasi di atas, bisa kita simpulkan bahwa website selalu ditampilkan
dalam bentuk kotak-kotak. Inilah yang dimaksud dengan box model.
Box model bertujuan untuk menyusun elemen-elemen website agar terlihat lebih rapi dan menarik. Tidak
hanya dari segi tampilan, interaksi dengan pengguna pun juga lebih maksimal. Penyusunan yang tepat
akan membuat website Anda menjadi lebih intuitif.
Karena setiap elemen disusun dan ditempatkan dengan rapi, pengguna bisa lebih mudah mencari dan
menggunakan setiap fitur yang ada di website Anda. Hasilnya, website Anda menjadi lebih mudah untuk
digunakan, menarik secara visual, dan membuat pengunjung betah berlama-lama di sana.
Fungsi CSS Box Model

Anda sudah mengetahui bahwa CSS adalah make-up bagi sebuah website. Fungsi utamanya adalah
mendesain tampilan website agar terlihat lebih cantik dan menarik. Jika dikaitkan dengan model kotak-
kotak yang kita bahas di atas, maka fungsi CSS Box Model adalah untuk menata dan mempercantik kotak-
kotak tersebut.
Setiap elemen dalam website harus didesain dengan teliti. Mulai dari ukuran, warna, penempatan, sampai
jarak antar elemen. Anda tidak akan mendapatkan hasil yang memuaskan kalau hanya mengandalkan
HTML untuk urusan ini. Karena itulah CSS Box Model hadir untuk melengkapi kekurangan-kekurangan
HTML.
CSS Box Model menyediakan fitur lengkap untuk mendesain elemen-elemen website sesuai keinginan
Anda. Sekarang, mari kita bahas semuanya satu-per-satu.
3 Property CSS Box Model yang Wajib Anda Ketahui
CSS Box Model terdiri dari 3 property yaitu margin, padding, dan border. Masing-masing property
mempunyai fungsi dan cara penggunaan tersendiri. Kita mulai dari property yang pertama.
1. Margin
Dalam Model Box CSS, property margin digunakan untuk mengatur jarak antar elemen. Tanpa pengaturan
margin, elemen-elemen website Anda bisa saling berbenturan atau melekat satu sama lain. Ini akan
membuat website Anda terlihat berantakan dan tidak menarik.
Penggunaan property margin bisa Anda lihat pada contoh kode di bawah ini.
<html>
<head>
<title>Belajar CSS Box Model</title>
<style>
.elemen {
width : 120px;
height : 120px;
background-color : red;
margin-bottom : 30px;
</style>
</head>
<body>
<div class="elemen">
Elemen 1
</div>
Elemen 2
</div>
</body>
</html>
Jalankan kode di atas menggunakan web browser. Anda akan melihat dua kotak berwarna merah seperti di
bawah ini :
Terdapat jarak antara Elemen 1 dan elemen 2. Jarak tersebut kita buat dengan property margin-bottom
seperti pada contoh kode di atas. Coba saja mengubah nilai margin-bottom dari 70px ke nilai berapa pun
yang Anda suka. Jarak antara kedua kotak tersebut pasti juga berubah.
Property margin digunakan untuk mengatur jarak antar elemen. Tidak hanya ke bawah, Anda juga bisa
menentukan jarak di sisi atas, kiri, dan kanan. Lihat tabel di bawah :
Property Fungsi Contoh
margin-top Mengatur jarak elemen di sisi atas margin-top : 50px
margin-bottom Mengatur jarak elemen di sisi bawah margin-bottom : 50px
margin-left Mengatur jarak elemen di sisi kiri margin-left : 50px
margin-right Mengatur jarak elemen di sisi kanan margin-right : 50px
Menggunakan CSS Shorthand Pada Property Margin

Dalam CSS Model Box, property margin bisa dibuat lebih efisien menggunakan CSS Shorthand.
Contohnya sebagai berikut :
margin: 50px 30px 50px 30px;
Pada contoh di atas, property margin dibuat lebih ringkas menjadi satu baris yang langsung berisi empat
nilai. Secara berurutan, nilai-nilai tersebut adalah top (atas), right (kanan), bottom (bawah), dan left (kiri).
Selain menentukan ukuran margin untuk masing-masing sisi seperti di atas, Anda juga bisa menggunakan
Shorthand yang lebih ringkas seperti di bawah ini :
margin: 50px 30px;
Pada contoh kode di atas, kita hanya menentukan dua nilai margin. Nilai yang pertama digunakan untuk
sisi atas dan bawah. Nilai yang terakhir menentukan ukuran margin kiri dan kanan. Shorthand di atas
digunakan apabila margin atas dan bawah bernilai sama, serta kiri dan kanan juga bernilai sama.
Baca Juga: SQL Injection: Pengertian, Cara Kerja, dan Cara Mencegahnya
Atau, Anda juga bisa menggunakan shorthand yang satu ini :
margin: 50px 40px 30px;
Dengan shorthand di atas, margin top ditentukan dengan nilai pertama yaitu 50px. Nilai kedua menentukan
margin kiri dan kanan. Sedangkan nilai terakhir adalah margin bottom. Ini digunakan bila margin kiri dan
kanan bernilai sama, tapi atas dan bawahnya berbeda.
2. Padding
Property CSS Box Model yang kedua adalah padding. Fungsi dari property ini adalah untuk memberikan
jarak pada isi elemen.
Coba Anda lihat lagi gambar kedua kotak di atas. Walaupun kita sudah membuat jarak antara elemen 1 dan
elemen 2, tapi teks yang tertulis di dalam elemen terlihat terlalu mepet ke garis kotak.
Hal ini membuat teks terlihat tidak rapi. Untuk mengatasinya, Anda bisa menggunakan property padding
agar teks diletakkan agak ke tengah sehingga tidak terlalu mepet.
Contohnya seperti ini :
<html>
<head>
<style>
.elemen {
width : 120px;
height : 120px;
padding-left : 10px;
padding-top : 10px;
</style>
</head>
<body>
Elemen 1
</div>
Elemen 2
</div>
</body>
</html>
Dari contoh kode sebelumnya, kita tambahkan dua property padding. Yang pertama adalah padding-left
untuk memberi jarak dari sisi kiri. Kemudian padding-top untuk jarak dari atas. Hasilnya bisa Anda lihat
pada gambar berikut ini :
Dengan menentukan padding, teks dalam elemen terlihat lebih berjarak dari garis kotak. Dengan begitu,
teks menjadi lebih rapi dan mudah untuk dibaca.
Sama seperti margin, padding juga terdiri dari empat property, yaitu :
padding-top Mengatur jarak elemen dengan isi dari sisi atas padding-top : 50px
padding-bottom Mengatur jarakelemen dengan isi dari sisi bawah padding-bottom : 50px
padding-left Mengatur jarak elemen dengan isi dari sisi kiri padding-left : 50px
padding-right Mengatur jarak elemen dengan isi dari sisi kanan padding-right : 50px
Penting untuk dicatat bahwa padding left dan right akan menambah ukuran width. Sedangkan top dan
bottom menambah ukuran height.
Baca Juga: Belajar Vue JS: Pengertian, Kelebihan, dan Cara Menggunakannya
Misalnya, pada contoh di atas, kita memberikan nilai sebesar 10px untuk padding-left dan padding-top.
Secara otomatis, ukuran width dan height elemen juga akan bertambah sebesar 10px menjadi 130px.
Untuk penggunaan CSS shorthand, penerapannya sama persis dengan margin.
3. Border
Anda mungkin sudah tidak asing lagi dengan istilah border. Dalam CSS Box Model, border berfungsi
untuk memberikan garis pinggir. Coba Anda lihat lagi contoh di atas. Warna merah pada elemen
berbenturan langsung dengan background.
Border sangat diperlukan jika warna elemen dan warna background saling tumpang tindih. Bayangkan jika
Anda harus mencantumkan gambar bendera merah putih di website berwarna background putih. Warna
putih pada bendera akan menyatu dengan background sehingga pengunjung hanya akan melihat warna
merah.
Lain halnya jika Anda memberikan batas pada gambar bendera berupa border berwarna hitam. Pengunjung
akan melihat bahwa gambar tersebut adalah bendera merah putih. Itulah gunanya border.
Penggunaan property border pada CSS Box Model bisa Anda lihat pada contoh kode berikut :
<html>
<head>
<style>
.elemen {
width : 120px;
height : 120px;
padding-left : 10px;
padding-top : 10px;
border-width : 6px;
border-style : solid;
border-color : black;
</style>
</head>
<body>
Elemen 1
</div>
Elemen 2
</div>
</body>
</html>
Dapat dilihat bahwa ada 3 property baru yang kita tambahkan. Jika Anda menjalankan kode di atas di web
browser, Anda akan mendapatkan hasil seperti ini :
Anda bisa melihat ada garis hitam yang membatasi keempat sisi elemen. Itu adalah hasil dari property
border yang kita tentukan pada kode di atas.
Penjelasan dari ketiga property border tersebut bisa Anda lihat pada tabel di bawah ini :
border-width Mengatur ketebalan border border-width : 6px
border-style Mengatur jenis border border-style : solid
padding-left Mengatur jarak elemen dengan isi dari sisi kiri margin-left : 50px
Sama seperti margin dan padding, ukuran border juga akan menambah ukuran elemen. Jadi perhitungkan
baik-baik ukuran elemen yang Anda inginkan dengan menyertakan padding dan border.
Menggunakan CSS Shorthand Pada Property Border
Untuk menggunakan Shorthand pada property border, Anda bisa mengikuti contoh seperti di bawah ini :
border: 6px solid black;
Dengan shorthand di atas, kita menentukan ukuran, jenis, dan warna border dalam satu baris sekaligus.
Cara ini tentu lebih efisien dalam penulisan kode program daripada harus menentukan setiap property satu-
per-satu. Kecuali jika memang Anda merasa perlu menuliskan setiap property secara spesifik.
Untuk memperdalam pemahaman Anda mengenai CSS Box Model, Anda bisa memodifikasi contoh kode
di atas dengan nilai-nilai yang berbeda. Buatlah lebih banyak elemen dengan mencoba setiap property
yang baru saja Anda pelajari. Praktik langsung adalah cara paling efektif untuk memahami dan mengingat
materi pemrograman
Outline Style
outline style digunakan untuk mengatur bagaimana style dari sebuah garis, semisal
anda ingin membuat garis lurus, garis putus putus dan model garis yang lain, anda
dapat menggunakan property outline-style, untuk lebih memahami silahkan perhatikan
skrip dibawah ini :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5p{
6 border: 1px solid black;
7 outline-color:red;
8}
9 p.dotted {outline-style: dotted;}
10 p.dashed {outline-style: dashed;}
11 p.solid {outline-style: solid;}
12 p.double {outline-style: double;}
13 p.groove {outline-style: groove;}
14 p.ridge {outline-style: ridge;}
15 p.inset {outline-style: inset;}
16 p.outset {outline-style: outset;}
17 </style>
18 </head>
19 <body>
20
21 <h2>Contoh Penggunaan Outline Style</h2>
22
23 <p C L A S S ="dotted">Paragraf dengan outline style dotted</p>
24 <p C L A S S ="dashed">Paragraf dengan outline style dashed</p>
25 <p C L A S S ="solid">Paragraf dengan outline style solid</p>
26 <p C L A S S ="double">Paragraf dengan outline style D O U B L E </p>
27 <p C L A S S ="groove">Paragraf dengan outline style groove</p>
28 <p C L A S S ="ridge">Paragraf dengan outline style ridge</p>
29 <p C L A S S ="inset">Paragraf dengan outline style inset</p>
30 <p C L A S S ="outset">Paragraf dengan outline style outset</p>
31 </body>
32 </html>

semisal kita simpan dengan nama outline-style.html, lalu kita buka di browser maka
tampilannya adalah sebagai berikut :
Penjelasannya :
 Terlihat beberapa paragraf yang menggunakan garis outline yang berbeda, hal tersebut
dikarenakan kita menggunakan outline style yang berbeda di masing – masing paragraf
 Perhatikan penggunaan masing masing dari value outline-style pada masing masing class
yang digunakan di masing masing paragraf
 Jika anda belum memahami penggunaan class silahkan baca pembahasan kami
mengenai jenis jenis selector css

outline-width
Selain bisa mengatur style dari garis outline, CSS juga dapat digunakan untuk mengatur
ukuran dari outline. Anda bisa menentukan ukurannya apakah 1 px 2 px dan
seterusnya.
Untuk lebih memahami silahkan perhatikan skrip dibawah ini :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 p {border: 1px solid black;}
6
7 p.satu {
8 outline-style: double;
9 outline-width: thick;
10 margin:30px;
11 }
12
13 p.dua {
15 outline-width: 10px;
16 margin:30px;
17 }
18 </style>
19 </head>
20 <body>
21
22 <h2>Contoh Property outline width</h2>
23
24 <p C L A S S ="satu">Paragraf Pertama</p>
25 <p C L A S S ="dua">Paragraf Kedua</p>
26
27 </body>
28 </html>
semisal kita simpan dengan nama outline-width.html lalu silahkan buka di browser, maka

tampilannya adalah sebagai berikut :
X
Penjelasannya sebagai berikut :
1. Paragraf pertama menggunakan ukuran outline-width thick; pada class satu, sehingga
outline terlihat hampir menyatu dengan border pada paragraf 1
2. Paragraf kedua menggunakan ukuran outline-width 10px; pada class dua, outline di
paragraf 2 terlihat lebih ada jarak dengan border.
Outline-Color
Selain merubah style garis dan ukuran garis, CSS juga dapat digunakan untuk mengatur
warna dari garis outline, untuk lebih memahami silahkan perhatikan skrip dibawah ini :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 p.satu {
8 outline-color: red;
10 margin:30px;
11 }
12 p.dua {
15 outline-color: green;
17 margin:30px;
18 }
19 </style>
20 </head>
21 <body>
22
23 <h2>Contoh Property outline-color</h2>
24
25 <p C L A S S ="satu">Paragraf 1</p>
26 <p C L A S S ="dua">Paragraf 2</p>
27
28 </body>
29 </html>
Semisal kita simpan dengan nama outline-color.html lalu silahkan buka di browser maka

hasilnya adalah sebagai berikut :
1. Paragraf pertama untuk outline memiliki warna merah, karena class satu menggunakan
property outline-color:red;
2. Paragraf kedua untuk border memiliki warna garis hijau, karena class dua menggunakan
property border-color:green;

Outline Shorthand Property
Istilah shorthand adalah pemendekan dalam penulisan property outline di CSS, jadi anda
dapat menset style, ukuran, dan warna garis outline, secara bersamaan dalam satu
perintah.
silahkan perhatikan skrip dibawah ini :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5p{
7 outline: 5px dotted red;
8}
9 </style>
10 </head>
11 <body>
12
13 <h2>Contoh Outline Shorthand</h2>
14
15 <p>Paragraf Pertama</p>
16
17 </body>
18 </html>
semisal kita simpan dengan nama outline-shorthand.html lalu kita buka di browser, maka

hasilnya adalah sebagai berikut :
X
Penjelasan :
 Paragraf tersebut memiliki outline dengan style garis dotted, ukuran 5 pixel dan
berwarna merah, anda hanya perlu menuliskan outline: 5px dotted red;
Outline Style
outline style digunakan untuk mengatur bagaimana style dari sebuah garis, semisal anda ingin membuat
garis lurus, garis putus putus dan model garis yang lain, anda dapat menggunakan property outline-style,
untuk lebih memahami silahkan perhatikan skrip dibawah ini :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 p{
7 outline-color:red;
8 }
9 p.dotted {outline-style: dotted;}
10p.dashed {outline-style: dashed;}
11p.solid {outline-style: solid;}
12p.double {outline-style: double;}
13p.groove {outline-style: groove;}

14p.ridge {outline-style: ridge;}
15p.inset {outline-style: inset;}
16p.outset {outline-style: outset;}
17</style>
18</head>
19<body>
20
21<h2>Contoh Penggunaan Outline Style</h2>
22
23<p class="dotted">Paragraf dengan outline style dotted</p>
24<p class="dashed">Paragraf dengan outline style dashed</p>
25<p class="solid">Paragraf dengan outline style solid</p>
26<p class="double">Paragraf dengan outline style double</p>
27<p class="groove">Paragraf dengan outline style groove</p>
28<p class="ridge">Paragraf dengan outline style ridge</p>
29<p class="inset">Paragraf dengan outline style inset</p>
30<p class="outset">Paragraf dengan outline style outset</p>
31</body>
32</html>
semisal kita simpan dengan nama outline-style.html, lalu kita buka di browser maka tampilannya adalah
sebagai berikut :
Penjelasannya :
 Terlihat beberapa paragraf yang menggunakan garis outline yang berbeda, hal tersebut
dikarenakan kita menggunakan outline style yang berbeda di masing – masing paragraf
 Perhatikan penggunaan masing masing dari value outline-style pada masing masing class yang
digunakan di masing masing paragraf
 Jika anda belum memahami penggunaan class silahkan baca pembahasan kami mengenai jenis
jenis selector css
outline-width
Selain bisa mengatur style dari garis outline, CSS juga dapat digunakan untuk mengatur ukuran dari
outline. Anda bisa menentukan ukurannya apakah 1 px 2 px dan seterusnya.
Untuk lebih memahami silahkan perhatikan skrip dibawah ini :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 p {border: 1px solid black;}
6
7 p.satu {
9 outline-width: thick;
10 margin:30px;
11}
12
13p.dua {
16 margin:30px;
17}
18</style>
19</head>
20<body>
21
22<h2>Contoh Property outline width</h2>
23
24<p class="satu">Paragraf Pertama</p>
25<p class="dua">Paragraf Kedua</p>
26
27</body>
28</html>
semisal kita simpan dengan nama outline-width.html lalu silahkan buka di browser, maka tampilannya
adalah sebagai berikut :
3. Paragraf pertama menggunakan ukuran outline-width thick; pada class satu, sehingga outline
terlihat hampir menyatu dengan border pada paragraf 1
4. Paragraf kedua menggunakan ukuran outline-width 10px; pada class dua, outline di paragraf 2
terlihat lebih ada jarak dengan border.
Outline-Color
Selain merubah style garis dan ukuran garis, CSS juga dapat digunakan untuk mengatur warna dari garis
outline, untuk lebih memahami silahkan perhatikan skrip dibawah ini :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 p.satu {
8 outline-color: red;
10 margin:30px;
11}
12p.dua {
15 outline-color: green;
17 margin:30px;
18}
19</style>
20</head>
21<body>
22
23<h2>Contoh Property outline-color</h2>
24
25<p class="satu">Paragraf 1</p>
26<p class="dua">Paragraf 2</p>

27
28</body>
29</html>
Semisal kita simpan dengan nama outline-color.html lalu silahkan buka di browser maka hasilnya adalah
sebagai berikut :
3. Paragraf pertama untuk outline memiliki warna merah, karena class satu menggunakan property
outline-color:red;
4. Paragraf kedua untuk border memiliki warna garis hijau, karena class dua menggunakan property
border-color:green;
Outline Shorthand Property
Istilah shorthand adalah pemendekan dalam penulisan property outline di CSS, jadi anda dapat menset
style, ukuran, dan warna garis outline, secara bersamaan dalam satu perintah.
silahkan perhatikan skrip dibawah ini :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 p{
7 outline: 5px dotted red;

8 }
9 </style>
10</head>
11<body>
12
13<h2>Contoh Outline Shorthand</h2>
14
15<p>Paragraf Pertama</p>
16
17</body>
18</html>
semisal kita simpan dengan nama outline-shorthand.html lalu kita buka di browser, maka hasilnya
adalah sebagai berikut :
Penjelasan :
 Paragraf tersebut memiliki outline dengan style garis dotted, ukuran 5 pixel dan berwarna
merah, anda hanya perlu menuliskan outline: 5px dotted red;

Apa Itu Box Model

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Apa Itu Box Model

Diunggah oleh

Hak Cipta:

Format Tersedia

Apa itu Box Model?

Fungsi CSS Box Model

3 Property CSS Box Model yang Wajib Anda Ketahui

<title>Belajar CSS Box Model</title>

Property Fungsi Contoh

margin-top Mengatur jarak elemen di sisi atas margin-top : 50px

margin-bottom Mengatur jarak elemen di sisi bawah margin-bottom : 50px

margin-left Mengatur jarak elemen di sisi kiri margin-left : 50px

margin-right Mengatur jarak elemen di sisi kanan margin-right : 50px

Menggunakan CSS Shorthand Pada Property Margin

margin: 50px 30px 50px 30px;

margin: 50px 30px;

Baca Juga: SQL Injection: Pengertian, Cara Kerja, dan Cara Mencegahnya

Atau, Anda juga bisa menggunakan shorthand yang satu ini :

margin: 50px 40px 30px;

Contohnya seperti ini :

<title>Belajar CSS Box Model</title>

Property Fungsi Contoh

Baca Juga: Belajar Vue JS: Pengertian, Kelebihan, dan Cara Menggunakannya

Untuk penggunaan CSS shorthand, penerapannya sama persis dengan margin.

<title>Belajar CSS Box Model</title>

Property Fungsi Contoh

border-width Mengatur ketebalan border border-width : 6px

border-style Mengatur jenis border border-style : solid

Menggunakan CSS Shorthand Pada Property Border

border: 6px solid black;

6 border: 1px solid black;

9 p.dotted {outline-style: dotted;}

10 p.dashed {outline-style: dashed;}

11 p.solid {outline-style: solid;}

12 p.double {outline-style: double;}

13 p.groove {outline-style: groove;}

14 p.ridge {outline-style: ridge;}

15 p.inset {outline-style: inset;}

16 p.outset {outline-style: outset;}

21 <h2>Contoh Penggunaan Outline Style</h2>

23 <p C L A S S ="dotted">Paragraf dengan outline style dotted</p>

24 <p C L A S S ="dashed">Paragraf dengan outline style dashed</p>

25 <p C L A S S ="solid">Paragraf dengan outline style solid</p>

26 <p C L A S S ="double">Paragraf dengan outline style D O U B L E </p>

27 <p C L A S S ="groove">Paragraf dengan outline style groove</p>

28 <p C L A S S ="ridge">Paragraf dengan outline style ridge</p>

29 <p C L A S S ="inset">Paragraf dengan outline style inset</p>

30 <p C L A S S ="outset">Paragraf dengan outline style outset</p>

Untuk lebih memahami silahkan perhatikan skrip dibawah ini :

5 p {border: 1px solid black;}

22 <h2>Contoh Property outline width</h2>

24 <p C L A S S ="satu">Paragraf Pertama</p>

25 <p C L A S S ="dua">Paragraf Kedua</p>

semisal kita simpan dengan nama outline-width.html lalu silahkan buka di browser, maka

Penjelasannya sebagai berikut :

6 border: 1px solid black;

13 border: 1px solid black;

23 <h2>Contoh Property outline-color</h2>

25 <p C L A S S ="satu">Paragraf 1</p>

26 <p C L A S S ="dua">Paragraf 2</p>

Semisal kita simpan dengan nama outline-color.html lalu silahkan buka di browser maka

Penjelasannya sebagai berikut :

silahkan perhatikan skrip dibawah ini :

6 border: 5px solid black;

7 outline: 5px dotted red;

13 <h2>Contoh Outline Shorthand</h2>