Belajar CSS #11 : Box Model di CSS

Anak Males – Kali ini kita akan belajar box model di CSS. Tampilan sebuah website terdiri dari elemen-elemen yang disusun sedemikian rupa sehingga menjadi satu kesatuan.

Elemen-elemen HTML ini memiliki beberapa materi penyusun yang dibungkus menjadi satu elemen, dan pada CSS hal ini dijelaskan sebagai sebuah properti yang disebut box model.

Box model di css yang akan kita bahas sebenarnya terdiri dari 4 macam yaitu :

• margin: digunakan untuk menentukan ukuran margin (ruang kosong) di sekeliling elemen. Anda dapat menentukan margin untuk setiap sisi secara terpisah, atau menentukan margin untuk semua sisi dengan menggunakan nilai auto.
• border: digunakan untuk menentukan ukuran dan gaya garis tepi di sekeliling elemen. Anda dapat menentukan border untuk setiap sisi secara terpisah, atau menentukan border untuk semua sisi dengan menggunakan nilai none.
• padding: digunakan untuk menentukan ukuran ruang kosong di dalam elemen, di antara border dan content. Anda dapat menentukan padding untuk setiap sisi secara terpisah, atau menentukan padding untuk semua sisi dengan menggunakan nilai auto.
• content: digunakan untuk menentukan konten dari elemen. Konten ini biasanya merupakan teks atau elemen HTML lainnya.

Namun karena border sudah kita bahas sebelumnya, jadi kita hanya akan membahas sisanya, yaitu padding dan margin.

Mari kita mulai.

Cara Membuat Box Model CSS : Padding

Padding adalah sebuah atribut di CSS yang digunakan untuk menentukan ukuran ruang kosong di dalam elemen, di antara border dan content. Padding berguna untuk memberikan jarak antara konten elemen dan border atau mengatur ukuran elemen secara manual.

Anda dapat menentukan padding untuk setiap sisi elemen secara terpisah menggunakan atribut-atribut berikut:

• padding-top: padding untuk sisi atas elemen.
• padding-right: padding untuk sisi kanan elemen.
• padding-bottom: padding untuk sisi bawah elemen.
• padding-left: padding untuk sisi kiri elemen.

Atau, Anda juga dapat menentukan padding untuk semua sisi elemen secara bersamaan menggunakan atribut padding. Nilai yang diberikan ke atribut ini akan diterapkan ke semua sisi secara sama.

Contoh penggunaan padding dalam CSS adalah sebagai berikut:

.box {
  padding: 10px; /* padding sebesar 10px untuk semua sisi */
}

.box2 {
  padding-top: 20px; /* padding sebesar 20px untuk sisi atas */
  padding-right: 10px; /* padding sebesar 10px untuk sisi kanan */
  padding-bottom: 5px; /* padding sebesar 5px untuk sisi bawah */
  padding-left: 15px; /* padding sebesar 15px untuk sisi kiri */
}

Dengan menggunakan padding, Anda dapat membuat elemen HTML Anda terlihat lebih rapi dan teratur di halaman web.

Cara Membuat Box Model CSS : Margin

Margin adalah sebuah atribut di CSS yang digunakan untuk menentukan ukuran ruang kosong di sekeliling elemen. Margin berguna untuk memberikan jarak antara elemen dengan elemen lain atau dengan batas halaman web.

Anda dapat menentukan margin untuk setiap sisi elemen secara terpisah menggunakan atribut-atribut berikut:

• margin-top: margin untuk sisi atas elemen.
• margin-right: margin untuk sisi kanan elemen.
• margin-bottom: margin untuk sisi bawah elemen.
• margin-left: margin untuk sisi kiri elemen.

Atau, Anda juga dapat menentukan margin untuk semua sisi elemen secara bersamaan menggunakan atribut margin. Nilai yang diberikan ke atribut ini akan diterapkan ke semua sisi secara sama.

Contoh penggunaan margin dalam CSS adalah sebagai berikut:

.box {
  margin: 10px; /* margin sebesar 10px untuk semua sisi */
}

.box2 {
  margin-top: 20px; /* margin sebesar 20px untuk sisi atas */
  margin-right: 10px; /* margin sebesar 10px untuk sisi kanan */
  margin-bottom: 5px; /* margin sebesar 5px untuk sisi bawah */
  margin-left: 15px; /* margin sebesar 15px untuk sisi kiri */
}

Dengan menggunakan margin, Anda dapat membuat elemen HTML Anda terlihat lebih rapi dan teratur di halaman web. Anda juga dapat menggunakan margin untuk memberikan jarak antara elemen dengan elemen lain atau dengan batas halaman web.

Berkenalan Dengan Box Sizing

Box sizing adalah sebuah atribut di CSS yang digunakan untuk menentukan bagaimana ukuran sebuah elemen HTML dihitung. Ada dua pilihan nilai yang dapat digunakan untuk atribut box sizing, yaitu content-box dan border-box.

Nilai content-box menyatakan bahwa ukuran elemen akan dihitung berdasarkan panjang dan lebar konten elemen, tanpa memasukkan margin, border, dan padding. Ini adalah nilai default yang digunakan oleh browser.

Contoh penggunaan box sizing dengan nilai content-box:

.box {
  width: 300px; /* ukuran elemen selebar 300px */
  height: 200px; /* ukuran elemen sepanjang 200px */
  padding: 10px; /* padding sebesar 10px untuk semua sisi */
  border: 1px solid black; /* border dengan ketebalan 1px dan warna hitam untuk semua sisi */
  box-sizing: content-box; /* ukuran elemen dihitung berdasarkan konten saja */
}

Nilai border-box menyatakan bahwa ukuran elemen akan dihitung dengan memasukkan margin, border, dan padding ke dalam ukuran konten elemen. Ini berguna jika Anda ingin mengatur ukuran elemen dengan memasukkan margin, border, dan padding ke dalamnya.

Contoh penggunaan box sizing dengan nilai border-box:

.box {
  width: 300px; /* ukuran elemen selebar 300px, termasuk margin, border, dan padding */
  height: 200px; /* ukuran elemen sepanjang 200px, termasuk margin, border, dan padding */
  padding: 10px; /* padding sebesar 10px untuk semua sisi */
  border: 1px solid black; /* border dengan ketebalan 1px dan warna hitam untuk semua sisi */
  box-sizing: border-box; /* ukuran elemen dihitung dengan memasukkan margin, border, dan padding */
}

Dengan menggunakan atribut box sizing, Anda dapat lebih mudah mengatur ukuran elemen HTML dan mengatur jarak antara elemen dengan elemen lain atau dengan batas halaman web.

Penutup

Yaps, cuma itu aja untuk tutorial css kali ini, sampai jumpa di tutorial berikutnya.