CSS Model Kotak
Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah “model kotak” digunakan ketika berbicara tentang desain dan tata letak.
Model kotak CSS pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya.
Model kotak memungkinkan kita untuk menempatkan perbatasan sekitar dan unsur ruang dalam kaitannya dengan unsur lainnya.
Penjelasan dari bagian-bagian yang berbeda:
- Margin – Menghapus sebuah daerah di sekitar perbatasan. Margin tidak memiliki warna latar belakang, itu benar-benar transparan
- Border – Sebuah batas yang terjadi di sekitar padding dan konten. Perbatasan dipengaruhi oleh warna latar belakang kotak
- Padding – Menghapus sebuah area di sekitar konten. Padding dipengaruhi oleh warna latar belakang kotak konten – Isi kotak, di mana teks dan gambar muncu
Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu mengetahui bagaimana model kotak bekerja.
Lebar dan Tinggi dari Elemen
Catatan Penting: Bila Anda mengatur lebar dan tinggi sifat elemen dengan CSS, Anda hanya mengatur lebar dan tinggi area konten. Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, perbatasan dan margin.
Lebar total elemen pada contoh di bawah ini 300px:
width: 250px;
padding: 10px;
border: 5px kelabu;
margin: 10px;
Mari kita melakukan matematika:
250px (lebar)
+ 20px (padding kiri dan kanan)
+ 10px (batas kiri dan kanan)
+ 20px (margin kiri dan kanan)
= 300px
Asumsikan bahwa Anda hanya memiliki 250px ruang. Mari kita membuat elemen dengan total lebar 250px:
width: 220px;
padding: 10px;
border: 5px kelabu;
margin: 0px;
Lebar total elemen harus dihitung seperti ini:
Jumlah elemen width = lebar + padding kiri + kanan + bantalan perbatasan kiri + kanan + perbatasan + margin kiri margin kanan
Tinggi total elemen harus dihitung seperti ini:
Ketinggian elemen Total = tinggi + bantalan bantalan atas + bawah + atas + perbatasan perbatasan margin atas bawah + + marjin bawah
Masalah Kompatibilitas Browser
Contoh di atas tidak ditampilkan dengan benar di versi IE8 dan sebelumnya.
Versi IE8 dan sebelumnya mencakup padding dan perbatasan di lebar, jika DOCTYPE adalah TIDAK dinyatakan.
Untuk memperbaiki masalah ini, tambahkan saja DOCTYPE ke halaman HTML:
<DOCTYPE html PUBLIC “- / / W3C / / DTD XHTML 1.0 Transitional / / EN”!
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<style type=”text/css”>
div.ex
{
width: 220px;
padding: 10px;
border: 5px kelabu;
margin: 0px;
}
</ style>
</ head>