Memahami Lebar, Tinggi, Margin dan Padding

Setiap unsur HTML dipaparkan sebagai kotak segi empat tepat. Model kotak CSS menerangkan empat lapisan yang membentuk kotak ini dari dalam ke luar: kandungan → pelapik → sempadan → jidar.

width dan height menetapkan dimensi kawasan kandungan. Secara lalai, pelapik dan sempadan ditambah pada saiz ini.

padding ialah ruang telus di dalam sempadan, antara kandungan dengan tepi sempadan. Ruang ini merupakan sebahagian daripada kawasan unsur yang boleh diklik atau dilukis latarnya.

Setiap sisi boleh ditetapkan secara berasingan:

margin ialah ruang telus di luar sempadan. Ruang ini menjarakkan unsur lain. Jidar negatif menarik unsur lebih dekat atau menyebabkan unsur bertindih.

Jidar menegak bercantum antara unsur blok bersebelahan: jurang sebenar ialah nilai yang lebih besar antara kedua-dua jidar, bukannya jumlahnya. Jidar mendatar tidak pernah bercantum.

Penggabungan jidar dihalang apabila:

• Unsur ialah anak flex atau grid
• Induk mempunyai overflow: hidden
• Induk mempunyai padding antara induk dengan anak pertama
• Unsur sebaris memisahkan adik-beradik

Menetapkan jidar mendatar kepada auto pada unsur blok dengan lebar tetap akan menengahkan unsur itu dalam bekasnya. Ini ialah teknik penengahan klasik.

Hadkan dimensi dengan sempadan minimum dan maksimum supaya unsur kekal mudah dibaca pada pelbagai saiz skrin:

Dalam model content-box lalai, jumlah lebar = width + padding-left + padding-right + border-left + border-right. Ini boleh mengelirukan dan merupakan sebab border-box lebih disukai.

CSS moden menawarkan padanan logik: margin-block, margin-inline, padding-block-start dan sebagainya. Sifat ini menyesuaikan diri dengan arah penulisan secara automatik.

Lapisan model kotak ialah kandungan, pelapik, sempadan dan jidar. Pelapik berada di dalam sempadan; jidar berada di luar. Jidar menegak bercantum antara adik-beradik yang bersebelahan. Gunakan margin: 0 auto dengan lebar tetap untuk menengahkan unsur blok.