Model Kerangka CSS

Model Kerangka CSS

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, saat mendiskusikan desain dan tata letak, istilah “model kotak” atau “model boks” akan digunakan.

Model kotak CSS sebenarnya adalah kotak yang memeriksa setiap elemen HTML. Ini termasuk: marjin eksternal, batas, padding internal, dan konten sebenarnya. Gambar di bawah ini menunjukkan model kotak:

Model Kerangka CSS

Penjelasan bagi bagian-bagian tersebut:

  • Konten - Konten kotak, tempat menampilkan teks dan gambar.
  • Padding - Menghapus area di sekitar konten. Padding transparen.
  • Batas - Sebaliknya, disekitar marjin internal dan konten.
  • Marjin - Menghapus area di luar batas. Marjin transparen.

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

Bagian terdalam kotak elemen adalah konten yang sebenarnya, yang di sekelilingi oleh padding. Padding menampilkan latar belakang elemen. Latar belakang padding adalah batas. Diantara batas adalah marjin, marjin secara default transparen, jadi tidak akan menutupi elemen yang berada di belakangnya.

Petunjuk:Latar belakang diterapkan pada area yang terdiri dari konten, padding, dan batas.

Marjin internal, batas, dan marjin eksternal adalah opsional, nilai standar adalah nol. Namun, banyak elemen akan disetel marjin dan padding oleh daftar gaya agen pengguna. Anda dapat menindahkan gaya ini browser dengan mengatur margin dan padding elemen menjadi nol. Ini dapat dilakukan secara terpisah, atau menggunakan pemilih umum untuk mengatur semua elemen:

* {
  margin: 0;
  padding: 0;
}

Dalam CSS, width dan height mengacu pada lebar dan tinggi area konten. Menambahkan padding, batas, dan marjin eksternal tidak akan mempengaruhi ukuran area konten, tetapi akan menambahkan ukuran total elemen kotak.

Dengan asumsi setiap sisi kotak memiliki marjin eksternal 10 pixel dan padding internal 5 pixel. Jika Anda ingin kotak elemen ini mencapai 100 pixel, Anda perlu mengatur lebar konten menjadi 70 pixel, lihat gambar di bawah ini:

Contoh Model Kerangka CSS 
#box {
  lebar: 70px;
  marjin: 10px;
  padding: 5px;
}

Petunjuk:Marjin internal, batas, dan marjin eksternal dapat diterapkan pada semua sisi elemen, atau hanya diterapkan pada sisi tertentu.

Petunjuk:Marjin dapat memiliki nilai negatif, dan sering digunakan marjin negatif dalam banyak situasi.

Contoh

Demo model kotak:

div {
  lebar: 300px;
  batas: 15px solid green;
  padding: 50px;
  marjin: 20px;
}

Coba Sendiri

Lebar dan tinggi elemen

Untuk mengatur lebar dan tinggi elemen dengan benar di semua peramban, Anda perlu memahami bagaimana model kotak bekerja.

Peringatan penting:Ketika mengatur ukuran lebar dan tinggi elemen menggunakan CSS, hanya atur lebar dan tinggi area konten. Untuk menghitung ukuran penuh elemen, Anda perlu menambahkan marjin internal, garis batas, dan marjin eksternal.

Contoh

<div> Lebar elemen akan menjadi 350px:

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

Coba Sendiri

Hitung seperti ini:

320px (lebar)
+ 20px (padat dalam kiri+kanan)
+ 10px (garis batas kiri+kanan)
+ 0px (marjin luar kiri+kanan)
= 350px

Lebar keseluruhan elemen seharusnya dihitung seperti ini:

Lebar keseluruhan elemen = lebar + kiri padat dalam + kanan padat dalam + kiri garis batas + kanan garis batas + kiri marjin luar + kanan marjin luar

Tinggi keseluruhan elemen seharusnya dihitung seperti ini:

Tinggi keseluruhan elemen = tinggi + atas padat dalam + bawah padat dalam + atas garis batas + bawah garis batas + atas marjin luar + bawah marjin luar