Kotak CSS

Dalam kotak CSS digunakan ketika berbicara tentang design dan tata letak. Pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, dan terdiri dari : margin, border, padding, dan konten.

Penjelasannya :

Properti	Keterangan
Margin	Menghapus sebuah daerah di sekitar border dan tidak berwarna alias transparan.
Border	Garis yang terjadi di sekitar padding dan konten.
Padding	Menghapus sebuah daerah di sekitar konten. Padding akan mengikuti warna dari konten.
Konten	Isi dari kotak, yang dimana teks dan gambar muncul.

Misalnya anda ingin membuat sidebar, dengan sisa lebar 300px :

#sidebar{
width:250px;
padding:10px;
border:5px solid yellow;
margin:10px;
}

Sekarang dijumlah :

250px (width) + 20px (kiri dan kanan padding) + 10px (kiri dan kanan border) + 20px (kiri dan kanan margin) = 300px

Yang perlu anda ketahui adalah tidak semua browser sama. Di Firefox bisa terlihat rata, tetapi belum tentu di IE. Jadi perlu dilakukan trik.

Ini biasa Nano terapkan ditemplate yang Nano buat :

#sidebar{
width:250px;
padding:10px;
border:3px solid yellow;
margin:7px;
}

250px (width) + 20px (kiri dan kanan padding) + 6px (kiri dan kanan border) + 14px (kiri dan kanan margin) = 290px

Biasanya Nano akan menyisakan lebar untuk terbuang, supaya tampilannya terlihat sama disemua browser. Pengujiannya lewat Chrome, IE, dan FireFox.

Alhamdulillah