Model Papan CSS

Model Papan CSS

Semua elemen HTML boleh dianggap sebagai kotak. Dalam CSS, ketika mendiskusikan desain dan tata letak, istilah 'model kotak' atau 'model boks' akan digunakan.

Model kotak CSS sebenarnya adalah kotak yang melingkungi setiap elemen HTML. Ini termasuk: margin luar, border, padding dalam, serta konten yang sebenarnya. Gambar di bawah menunjukkan model kotak:

Model Papan CSS

Penjelasan bagian yang berbeda:

  • Konten - Konten kotak, tempat menampilkan teks dan gambar.
  • Padding - Menghapus area di sekitar konten. Padding adalah transparan.
  • Border - Mengelilingi border dalam dan konten.
  • Margin - Menghapus area di luar batas. Margin adalah transparan.

Model kotak memungkinkan kita menambahkan border di sekitar elemen dan mendefinisikan ruang antara elemen.

Bagian terdalam kotak elemen adalah konten yang sebenarnya, yang di sekelilingi adalah padding dalam. Padding dalam menampilkan latar belakang elemen. Latar belakang padding adalah border. Luar border adalah margin, margin secara default adalah transparan, sehingga tidak akan menutupi elemen yang berada di belakangnya.

Petunjuk:Latar belakang diterapkan ke area yang terdiri dari konten, padding dalam, dan border.

Margin dalam, border, dan margin luar adalah opsional, nilai standar adalah nol. Namun, banyak elemen akan disetting oleh stylesheet agensi pengguna. Dapat diatasi dengan menetapkan margin dan padding elemen menjadi nol. Ini dapat dilakukan secara terpisah, atau menggunakan selector umum untuk mengatur semua elemen:

* {
  margin: 0;
  padding: 0;
}

Dalam CSS, width dan height merujuk kepada lebar dan ketinggian area konten. Menambahkan padding, border, dan margin luar tidak akan mempengaruhi ukuran area konten, tetapi akan meningkatkan ukuran kotak elemen.

Dengan asumsi setiap sisi kotak memiliki margin luar 10 pixel dan padding dalam 5 pixel. Jika ingin elemen kotak mencapai 100 pixel, perlu menetapkan lebar konten menjadi 70 pixel, lihat gambar di bawah:

Contoh Model Papan CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Petunjuk:Margin dalam, border, dan margin luar dapat diterapkan pada semua sisi elemen, atau dapat diterapkan hanya pada sisi yang spesifik.

Petunjuk:Margin dapat berupa nilai negatif, dan sering digunakan margin negatif dalam banyak situasi.

Contoh

Paparan model kotak:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

coba sendiri

Lebar dan ketinggian elemen

Untuk menetapkan lebar dan ketinggian elemen dengan benar di semua peramban, Anda perlu mengerti bagaimana model kotak bekerja.

Peringatan penting:Ketika mengatur ketinggian dan lebar elemen menggunakan CSS, hanya perlu menetapkan lebar dan ketinggian area konten. Untuk menghitung ukuran penuh elemen, perlu menambahkan margin dalam, border, dan margin luar.

Contoh

<div> elemen keseluruhan lebar akan adalah 350px:

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

coba sendiri

hitung seperti ini:

320px (lebar)
+ 20px (padding kiri+kanan)
+ 10px (border kiri+kanan)
+ 0px (margin eksternal kiri+kanan)
= 350px

lebar keseluruhan elemen seharusnya dihitung seperti ini:

lebar keseluruhan elemen = lebar + kiri padding + kanan padding + kiri border + kanan border + kiri margin + kanan margin

tinggi keseluruhan elemen seharusnya dihitung seperti ini:

tinggi keseluruhan elemen = tinggi + atas padding + bawah padding + atas border + bawah border + atas margin + bawah margin