Dalam CSS, ini Box Model adalah konsep penting untuk menentukan bagaimana suatu elemen disusun dan diposisikan pada halaman web. Ini terdiri dari komponen dasar seperti Konten, Padding, Border dan Margin.
Content
Content adalah area yang berisi konten elemen yang sebenarnya, seperti teks, gambar, atau video.
Untuk menentukan ukuran konten, kami menggunakan properti width and height.
Padding
Padding adalah ruang di sekitar konten, menciptakan celah antara konten dan elemen border.
Untuk menentukan padding nilai, kami menggunakan properti padding-top, padding-right,padding-bottom and . padding-left
Border
Itu Border adalah garis besar di sekitar elemen, menciptakan batas yang jelas antara konten dan area sekitarnya.
Untuk memformat border, kami menggunakan border-width, border-style, dan border-color properti.
Margin
Margin adalah ruang di luar elemen border, menciptakan celah antara elemen lainnya.
Untuk mendefinisikan margin nilai, kita menggunakan properti margin-top, margin-right, dan. margin-bottom margin-left
Dengan memanfaatkan Box Model in CSS, kita dapat menyesuaikan ukuran dan posisi suatu elemen dengan memodifikasi nilai komponennya.
Contoh:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Pada contoh di atas, elemen dengan kelas .box memiliki lebar 200px dan tinggi 100px. Ini memiliki 20px padding, hitam border dengan ketebalan 1px, dan 10px margin.
Dengan menyesuaikan nilai ini, Anda dapat membuat elemen dengan ukuran dan jarak yang berbeda di halaman web Anda. Melalui penggunaan Box Model, Anda memiliki kendali atas pemosisian, ukuran, dan jarak elemen dalam antarmuka Anda.