CSS BOX MODEL
Assalamu'alaikum Wr. Wb
Hai sobat semua, terima kasih sudah mengunjungi blog saya. Sebelumnya kita sudah membahas tentang Tinggi dan Lebar pada CSS, untuk selanjutnya kita akan belajar mengenai Box Model pada CSS.
Langsung saja yukk...
Semua elemen HTML dianggap sebagai box, dalam CSS istilah "box model" digunakan ketika berbicara tentang desain dan tata letak.
CSS Box Model pada dasarnya sebuah kotak yang membungkus disekitar elemen HTML. Ini terdiri dari : margin, border, padding, dan konten yang sebenarnya. Lihat gambar dibawah ini :
Keterangan :
- Content : Isi box, dimana tekss dan gambar muncul
- Padding : Mengahpus sebuah daerah disekitar konten. Padding transparan
- Border : Sebuah perbatasan yang terjadi disekitar padding dan content
- Margin : Menghapus sebuah daerah diluar border. Margin transparan
Box Model memungkinkan kita untuk menambahkan border sekitsr elemen, dan untuk menentukan ruang antara elemen.
Contoh :
Hasilnya :
LEBAR DAN TINGGI DARI ELEMEN
Untuk mengatur lebar dan tinggi dari suatu elemen dengan benar disemua browser, kita perlu tahu bagaimana Box Model bekerja.
Note : Bila kita mengatur lebar dan tinggi suatu elemen dengan CSS kita hanya mengatur lebar dan tinggi area konten, untuk menghitung ukuran penuh, kta juga harus menambahkan padding, border, dan margin.
Asumsikan kita ingin style elemen <div> untuk memiliki lebar total 35opx.
Contoh :
Hasilnya :
Silakan dicoba sendiri sobat, apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terim kasih.
CSS Box Model pada dasarnya sebuah kotak yang membungkus disekitar
elemen HTML. Ini terdiri dari : margin, border, padding, dan konten yang
sebenarnya.
Referensi :
http://www.w3schools.com/css/css_boxmodel.asp
Wassalamu'alaikum Wr. Wb