Pengenalan Box Model

by

Semua HTML elements dapat dilihat sebagai box. Term “box model” digunakan saat kita akan melakukan design dan layout.

Untuk mudahnya, buka kembali developer tools (Ctrl + Shift + I). Inspect element <section> pertama. Lihat gambar berikut.

Dapat dilihat, element <section> memiliki box property: padding, border dan margin.

Padding

Dari gambar box diatas, padding dapat dilihat sebagai area kosong (transparent) yang mengelilingi element. Area padding akan berwarna sesuai warna background.

Buka file style.css, lalu tambahkan property padding pada selector #product-title.

body{
    font-family: 'Nunito', sans-serif;
}

#product-title{
    background-color: red;
    padding: 15px;
}

.section-title{
    color: teal;
}

#product-title h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

Refresh halaman index.html, maka sekarang area <section> pertama akan lebih besar. Perhatikan juga pada developer tools, box padding akan terdapat nilai 15.

Developer tools adalah tools yang sangat berguna untuk web development. Disarankan untuk mulai membiasakan menggunakan developer tools.

Border

Border adalah area terluar yang mengelilingi element. Secara visual sebagai area yang mendefinisikan wilayah sebuah element.

Tambahkan rule border: border: 2px solid black; pada selector #product-title.

Perhatian: cara penulisan 2px solid black; adalah cara singkat dari penulisan 


border-width: 2px;
border-style: solid;
border-color: black;
body{
    font-family: 'Nunito', sans-serif;
}

#product-title{
    background-color: red;
    padding: 15px;
    border: 2px solid black;
}

.section-title{
    color: teal;
}

#product-title h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

Silakan refresh halaman index.html, maka disekililing element <section> pertama akan ada border berwarna hitam dengan ukuran 2px dan style solid.

Note: silakan bereksperimen dengan value lainnya, misal untuk property style, bisa ada pilihan double, dotted dan lainnya.

Disarankan untuk menggunakan text editor yang support code intellisense. Memudahkan dalam memilih value yang dapat digunakan dari sebuah property.

Margin

Margin adalah area transparent terluar dari sebuah element, teletak sesudah border. Umumnya digunakan untuk memberi jarak antar element.

Tambahkan rule margin: border: 20px; pada selector #product-title. Dapat dilihat, akan ada jarak antara element section dengan element disekitarnya.

body{
    font-family: 'Nunito', sans-serif;
}

#product-title{
    background-color: red;
    padding: 15px;
    border: 2px solid black;
    margin: 20px;
}

.section-title{
    color: teal;
}

#product-title h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

Kesimpulan

Box model dapat kita analogikan seperti rumah (element <section>), dengan halaman (padding) dan pagar (border). Sedangkan jarak antar rumah adalah margin.

Developer tools sangat berguna untuk memberikan gambaran visual dan dapat membantu debugging ketika saat CSS rule tidak berjalan sesuai harapan.

Property dari box model cukup banyak, untuk dokumentasi lengkap lihat di https://www.w3.org/TR/CSS22/box.html

Sharing is caring:

Leave a Comment