Kursus Membuat Web

iklan

Box Model CSS

Box Model CSS

Semua elemen HTML dapat dianggap sebagai box (kotak). Dalam CSS, istilah "box model" digunakan ketika berbicara tentang desain dan layout (tata letak).

Box Model atau model kotak di CSS pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari : margin, border, padding, dan konten.

Box Model atau model kotak memungkinkan kita untuk menambahkan border disekitar elemen, dan untuk menentukan ruang antar elemen.

Gambar di bawah menggambarkan box model atau model kotak :

Box Model
Gambar Box Model atau Model Kotak

Penjelasan dari bagian-bagian yang berbeda :

  • Content - Isi dari kotak, di mana teks dan gambar muncul
  • Padding - Jarak antara border dengan konten (isi). Padding transparan
  • Border - Batas di sekitar padding dan konten (isi)
  • Margin - Jarak di luar border. Margin transparan
Contoh
div {
	width: 300px;
	padding: 25px;
	border: 25px solid navy;
	margin: 25px;
}
Lihat ...

Width (Lebar) dan Height (Tinggi) dari Elemen

Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana box model atau model kotak bekerja.

Penting : Bila Anda mengatur property width dan height sebuah elemen dengan CSS, Anda hanya mengatur lebar dan tinggi area konten. Untuk menghitung ukuran penuh elemen itu, Anda juga harus menambahkan padding, border dan margin

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}
Lihat ...

Mari kita hitung :

  • 320px width
  • 20px (left + right padding)
  • 10px (left + right border)
  • 0px (left + right margin)

Total lebar elemen harus dihitung seperti ini :

Total lebar elemen = width + left padding + right padding + left border + right border + left margin + right margin

Total Tinggi dari elemen harus dihitung seperti ini :

Total tinggi elemen = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Browser Compatibility Issue

Internet Explorer 8 dan versi sebelumnya, memasukkan property padding dan border dalam lebar.

Untuk memperbaiki masalah ini, tambahkan <! DOCTYPE html> ke halaman HTML.

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015