Tutorial model kotak CSS Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari kotak CSS Model (Box Model),Lebar dan tinggi dari elemen,contoh,masalah kompatibilitas browser,
Semua elemen HTML dapat dianggap sebagai kotak di CSS, "model kotak" adalah istilah yang digunakan untuk merancang dan tata letak untuk digunakan saat.
Ini adalah kotak, dikemas sekitar model kotak elemen HTML CSS di alam, termasuk: margin, perbatasan, padding, dan konten yang sebenarnya.
Model kotak memungkinkan kita ruang antara elemen lain dan ditempatkan di sekitar elemen perbatasan elemen.
Gambar di bawah mengilustrasikan model kotak (Box Model):
bagian yang berbeda dari deskripsi:
Untuk lebar dan tinggi dari elemen di semua browser diatur dengan benar, Anda perlu mengetahui bagaimana model kotak bekerja.
Penting: Bila Anda menentukan lebar CSS elemen dan atribut tinggi, Anda hanya mengatur lebar dan tinggi area konten.Anda tahu, ukuran penuh dari elemen, Anda juga harus menambahkan padding, perbatasan, dan margin. .
Total lebar elemen dalam contoh di bawah ini adalah 300px:
Mari kita melakukan matematika:
250px (lebar)
+ 20px (kiri + kanan padding)
+ 10px (batas kiri + kanan)
+ 20px (kiri + kanan margin)
= 300px
Bayangkan Anda hanya memiliki 250 piksel ruang. Mari kita mengatur lebar total elemen 250 piksel:
Total lebar elemen terakhir dari formula adalah ini:
Total lebar elemen = bantalan kiri + lebar bantalan + kanan + perbatasan + kiri sisi + kanan kotak dari kiri + margin kanan
Tinggi total elemen akhir formula perhitungan adalah:
Tinggi total dari elemen = tinggi + padding atas di perbatasan bawah + bantalan + + + batas bawah + margin pada margin yang lebih rendah
Setelah halaman diatur ke DTD yang tepat, kebanyakan browser akan mengikuti ikon di atas untuk membuat konten. Namun, IE render tidak benar. 5 dan 6. Menurut spesifikasi W3C, ruang yang ditempati oleh elemen materi yang ditetapkan oleh properti lebar, dan padding dan perbatasan di sekitar konten adalah perhitungan lain. Sayangnya, IE5.X 6 dan menggunakan model mereka sendiri non-standar dalam modus aneh. Lebar browser ini atribut lebar bukan isi, tapi konten tersebut, jumlah dari padding dan perbatasan lebar.
Meskipun ada cara untuk memecahkan masalah ini. Tapi solusi terbaik adalah untuk menghindari masalah ini. Artinya, tidak menambahkan padding untuk elemen dengan lebar tertentu, tetapi cobalah untuk menambahkan bantalan atau margin untuk elemen induk dan elemen anak.
properti lebar untuk IE8 dan versi sebelumnya dari IE tidak mendukung padding dan lebar perbatasan.
Mengatasi tidak kompatibel IE8 dan masalah sebelumnya dapat menjadi sebuah halaman HTML deklarasi <! DOCTYPE html> bisa.