Box Model CSS

Apa itu Box Model?

Petik.net - Box Model pada CSS adalah konsep yang menggambarkan struktur elemen pada halaman web sebagai sebuah kotak (box) yang terdiri dari beberapa lapisan, yaitu content, padding, border, dan margin. Box Model pada CSS sangat penting untuk memahami struktur elemen pada halaman web dan untuk mengatur tata letak atau layout dari halaman web.

Menentukan Dimensi dan Posisi Box

Dimensi dan posisi box dapat ditentukan dengan menggunakan CSS. Berikut ini adalah beberapa property CSS yang digunakan untuk menentukan dimensi dan posisi box:

• Width: property untuk mengatur lebar box. Contohnya: width: 100px;.
• Height: property untuk mengatur tinggi box. Contohnya: height: 200px;.
• Position: property untuk mengatur posisi box. Contohnya: position: relative;.
• Top, right, bottom, left: property untuk mengatur jarak antara box dan tepi halaman web. Contohnya: margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;.

Padding, Border, dan Margin CSS

Setiap box pada halaman web memiliki beberapa lapisan, yaitu content, padding, border, dan margin. Berikut ini adalah property CSS yang digunakan untuk mengatur setiap lapisan pada box:

• Padding: property untuk mengatur jarak antara content dan border pada sebuah box. Contohnya: padding: 10px;.
• Border: property untuk mengatur border pada sebuah box. Contohnya: border: 1px solid #000000;.
• Margin: property untuk mengatur jarak antara border dan box yang lain. Contohnya: margin: 20px;.

Box Sizing CSS

Box Sizing adalah property CSS yang digunakan untuk mengatur ukuran dari sebuah box. Ada dua nilai yang dapat digunakan untuk property Box Sizing, yaitu:

• Content-Box: nilai default pada Box Sizing, dimana lebar dan tinggi box hanya mencakup content, tidak termasuk padding dan border. Contohnya: box-sizing: content-box;.
• Border-Box: nilai yang menyertakan lebar dan tinggi dari content, padding, dan border pada box. Contohnya: box-sizing: border-box;.

Dalam praktiknya, Box Sizing Border-Box lebih sering digunakan karena memudahkan dalam mengatur ukuran box dan menghindari kelebihan dimensi pada sebuah box akibat dari padding dan border. Contohnya:

div {
  width: 100%;
  padding: 20px;
  border: 1px solid #000000;
  box-sizing: border-box;
}

Pada contoh di atas, kita membuat sebuah kotak (box) menggunakan tag <div> dan memberikan property width, padding, border, dan box-sizing pada box tersebut. Dengan menambahkan property box-sizing: border-box, maka lebar dan tinggi box termasuk content, padding, dan border pada box tersebut.