CSSMateri CourseNusantech Academy

Modul 3-7. CSS Box Model

By 14 Mei 2020 Juni 3rd, 2020 No Comments

Halo teman-teman, selamat datang kembali dalam course dasar HTML & CSS. Di artikel sebelumnya teman-teman sudah mengetahui Property mengenai List & Table. Nah sekarang teman-teman akan berkenalan dengan konsep Box Model. Semangat!

Apa itu Box Model

Box Model merupakan konsep dasar sekaligus inti yang sangat penting dari pengembangan halaman web. Teman-teman wajib menguasi Box Model ini kalau ingin bisa membuat web. Semua elemen di dalam web merupakan buah dari konsep Box Model. 

Agar lebih paham coba perhatikan perumpamaan ini:

Perumpamaan untuk Box Model ini misalnya box kardus. Kardus tersebut tentunya memiliki lebar, tinggi, serta ruang didalamnya. Lebar dan tinggi yang dimaksud adalah Property Width dan Height.  Kemudian ruang itu bisa kita sebut dengan Padding. Dan didalam ruang ini, terdapat barang/benda yang di sebut dengan konten/isi. 

Kalau digambarkan jadi seperti ini.

  • Content

Content atau isi dapat berupa teks, gambar atau video. Konten terletak di tengah tengah elemen.

  • Width & height¬†

Width dan Height berfungsi memberikan lebar dan tinggi pada konten.

  • Padding

Padding terletak di antara konten dengan Border, fungsinya, memberikan ketebalan untuk memisahkan konten dengan Border. 

*: padding tidak dapat menerima nilai negatif

  • Border

Border seperti yang teman-teman ketahui merupakan garis tepi yang berada di luar elemen, membatasi antara padding dan margin. 

  • Margin

Margin adalah unsur terluar yang berfungsi memberikan jarak. Berbeda dengan padding, margin tidak terpengaruh oleh Property seperti Background-color, Tugasnya hanya memisahkan elemen dengan elemen lain disekitarnya.

Contoh penggunaan Box Model:

Kode HTML:

<body>
<div class="box-merah"> Konten </div>
<div class="box-pink"> Konten </div>
<body>

Kode CSS:

.box-merah {
width: 300px;
        height: 100px;
        padding: 20px;
        border: 5px solid blue;
        margin: 20px;
background-color: red;
}
.box-pink {
width: 600px;
        height: 600px;
        padding: 0;
        border: 5px solid red;
        margin: 20px;
background-color: pink;
}

Hasilnya:

Dari contoh di atas teman-teman seharusnya teman-teman sudah paham mengenai Box Model. :).

Penutup

Konsep box model ini sebetulnya tidaklah sulit. Agar lebih mudah dalam memahaminya, teman-teman sebaiknya sering berlatih menggunakan Property konsep Box Model di atas.

Kalau teman-teman ada pertanyaan, silahkan isi kolom komentar dibawah.

Next, di pembahasan berikutnya kita akan menyinggung tentang Display & Positioning. Tetap semangat, ikuti terus course ini ya!.

See you next time!

Leave a Reply