Dalam membuat design layout sebuah halaman website, kita membagi halaman menjadi beberapa area. Masing-masing area ini didefinisikan sebagai box model dan bisa ditempatkan diantara elemen html. Misalnya kita membagi halamman web menjadi 4 bagian utama , yaitu header, menu, content dan footer. Kemudian bagian content (isi) kita bagi lagi menjadi 2 bagian yaitu main-content dan sidebar.
Bagian tersebut kita buat dengan tag <div> dengan menggunakan atribut pengenal id, seperti <div id=”header”> atau <div id=”content”>. Saat membuat box model dengan div kita bisa menetapkan lebar box dengan properti width dan tinggi box dengan properti height. Agar lebih fleksibel, tinggi box juga bisa diatur dengan properti min-height atau max-height.
Didalam box tersebut kita bisa menaruh isi berupa text atau elemen html yang lain dan juga bisa membuat sebuat border untuk box. Kemudian kita juga bisa mengatur jarak antar box menggunakan properti margin dan mengatur jarak antara border box dengan isi menggunakan properti padding.
Perhatikan gambar ilustrasi dari content, border, margin dan padding pada box model berikut ini:
Dan berikut ini penjelasan beberapa properti yang digunakan untuk membuat box model dengan div :
1. width
Adalah properti CSS yang digunakan untuk mengatur lebar sebuah box model. Nilai properti ini lazim dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS width pada box model :
div {
width: 300px;
}
2. height
Adalah properti CSS yang digunakan untuk mengatur tinggi sebuah box model. Nilai properti ini juga lazim dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS height pada box model :
div {
height: 300px;
}
3. min-height
Adalah properti CSS yang digunakan untuk mengatur tinggi minimum sebuah box model. Biasanya kita gunakan ini untuk menjaga tampilan agar tetap proporsional tidak terpengaruh dari tinggi isi halaman. Nilai properti min-height dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS min-height pada box model :
div {
min-height: 300px;
}
4. max-height
Adalah properti CSS yang digunakan untuk mengatur tinggi maksimal sebuah box model. Biasanya kita gunakan ini untuk menjaga tampilan agar tetap proporsional tidak melebihi ukuran yang ditetapkan. Nilai properti max-height juga dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS max-height pada box model :
div {
min-height: 300px;
}
5. border
Adalah properti CSS yang digunakan untuk menetapkan border sebuah box-model. Dalam mengatur border kita menetapkan beberapa nilai berikut :
- ketebalan garis border, dengan satuan px misalnya 1px. style
- garis border, misalnya solid (garis penuh), dotted (titik-titik) atau dashed (strip-strip)
- warna garis border, misalnya red, blue atau #ff0000.
Contoh penggunaan CSS border pada box model :
div {
border: 1px solid #fa5698;
}
6. margin
Ada properti CSS yang digunakan untuk mengatur jarak box model terhadap box model atau elemen lain disamping kiri, kanan atau sebelah atas atau bawah. Urutan nilai margin adalah atas, kanan, bawah dan kiri.
Jadi jika diset “10px 2px 5px 3px” artinya :
- margin atas = 10px
- margin kanan = 2px
- margin bawah = 5px
- margin kiri = 3px
Contoh penggunaan CSS margin pada box model:
div {
margin : 10px 2px 5px 3px;
}
Selain itu kita juga bisa menetapkan margin khusus untuk bagian tertentu saja misalnya atas seperti contoh berikut ini :
div {
margin-top : 10px;
}
Jika nilai margin sama untuk tiap bagian, cukup ditulis sekali saja seperti ini :
div {
margin : 10px;
}
7. padding
Ada properti CSS yang digunakan untuk mengatur jarak antara box model dengan isi. Urutan nilai dari padding sama dengan margin, yaitu atas, kanan, bawah dan kiri.
Contoh penggunaan CSS padding pada box model:
div {
padding : 2px 2px 2px 2px;
}
Selain itu kita juga bisa menetapkan padding khusus untuk bagian tertentu saja misalnya atas seperti contoh berikut ini :
div {
padding-top : 1px;
}
Jika nilai padding sama untuk tiap bagian seperti contoh diatas, cukup ditulis sekali saja seperti ini :
div {
padding : 2px;
}
Kita bisa berlatih CSS box model disini >>
Note :
Kita juga bisa menerapkan properti-properti CSS untuk elemen html pada isi box seperti pada text, list atau tabel yang telah kita pelajari sebelumnya.
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
