CSS BOX AND LEYOUT

CSS Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah “model kotak” digunakan ketika berbicara tentang desain dan tata letak.

Kotak CSS Model dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Ini terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya. Gambar di bawah mengilustrasikan model kotak:

Penjelasan dari bagian-bagian yang berbeda:

• Konten – Isi kotak, di mana teks dan gambar muncul
• Padding – Menghapus sebuah daerah di sekitar konten. Padding transparan
• Border – Sebuah batas yang terjadi di sekitar padding dan konten
• Margin – Menghapus sebuah daerah di luar perbatasan. Margin transparan

Header

Sebuah header biasanya terletak di bagian atas website (atau tepat di bawah menu navigasi atas). Ini sering mengandung logo atau nama website:

navigasi Bar

Sebuah bar navigasi berisi daftar link ke bantuan pengunjung menavigasi melalui situs web Anda:

Kandungan

Tata letak di bagian ini, sering tergantung pada target pengguna. Tata letak yang paling umum adalah salah satu (atau menggabungkan mereka) dari berikut ini:

• 1-kolom (sering digunakan untuk mobile browser)
• 2-kolom (sering digunakan untuk tablet dan laptop)
• Tata letak 3-kolom (hanya digunakan untuk desktop)

Footer

footer ditempatkan di bagian bawah halaman Anda. Hal ini sering berisi informasi seperti hak cipta dan info kontak: