CSS Box Model

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


Model Box CSS pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, border, padding, dan content yang sebenarnya. Model kotak memungkinkan kita untuk menempatkan border sdan unsur ruang yang terkait dengan unsur-unsur lain. 

Gambar di bawah ini mengilustrasikan model kotak: 



Penjelasan:
  • Margin - Menghapus sebuah daerah di sekitar border . Margin tidak memiliki warna latar belakang ,benar-benar transparan
  • Border - Sebuah batas yang terjadi di sekitar padding dan konten . Border dipengaruhi oleh warna latar belakang kotak
  • Padding - Menghapus sebuah daerah di sekitar konten. Padding dipengaruhi oleh warna latar belakang kotak
  • Content - Isi dari kotak , di mana teks dan gambar muncul

Untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser , Anda perlu mengetahui bagaimana model box bekerja .


Lebar dan Tinggi dari sebuah Elemen

Penting: Bila Anda menentukan lebar dan tinggi sifat elemen dengan CSS , Anda hanya mengatur lebar dan tinggi area konten .Untuk mengetahui ukuran penuh dari elemen, anda juga harus menambahkan padding, border dan margin.
 
width: 250px ;
padding: 10px ;
border: 5px #ccc solid;
margin: 10px ;

Mari kita melakukan matematika :
250px (lebar )
+ 20px (padding kiri dan kanan)
+ 10px (border kiri dan kanan )
+ 20px (margin kiri dan kanan )
= 300px

 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda