Dalam CSS, Box Model adalah konsep penting untuk menentukan cara sesuatu elemen distruktur dan diletakkan pada halaman web. Ia terdiri daripada komponen asas seperti Kandungan, Padding, Border dan Margin.
Content
Content ialah kawasan yang mengandungi kandungan sebenar elemen, seperti teks, imej atau video.
Untuk menentukan saiz kandungan, kami menggunakan sifat width dan height.
Padding
Padding ialah ruang di sekeliling kandungan, mewujudkan jurang antara kandungan dan elemen border.
Untuk menentukan padding nilai, kami menggunakan sifat padding-top, padding-right,padding-bottom dan . padding-left
Border
Ia Border adalah garis besar di sekeliling elemen, mewujudkan sempadan yang jelas antara kandungan dan kawasan sekitarnya.
Untuk memformat border, kami menggunakan border-width, border-style, dan border-color sifat.
Margin
Margin ialah ruang di luar elemen border, mewujudkan jurang antara elemen lain.
Untuk menentukan margin nilai, kami menggunakan margin-top, margin-right, dan sifat. margin-bottom margin-left
Dengan menggunakan Box Model dalam CSS, kita boleh menyesuaikan saiz dan kedudukan elemen dengan mengubah suai nilai komponennya.
Contoh:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Dalam contoh di atas, elemen dengan kelas .box mempunyai lebar 200px dan ketinggian 100px. Ia mempunyai 20px padding, hitam border dengan ketebalan 1px dan 10px margin.
Dengan melaraskan nilai ini, anda boleh mencipta elemen dengan saiz dan jarak yang berbeza pada halaman web anda. Melalui penggunaan Box Model, anda mempunyai kawalan ke atas kedudukan, saiz dan jarak elemen dalam antara muka anda.