Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 12 : Box Model pada CSS

By Web Design Purbalingga Post a Comment
Box Model pada CSS – Sekarang masuk pada materi css yaitu tentang box model. Arti sederhana dari box model adalah sebuah kotak atau box yang membungkus elemen html itu sendiri. Box model ini terdiri dari beberapa bagian diantaranya ada margin, border, padding dan konten.

Box Model pada CSS

Masing – masing bagian memiliki fungsi yang berbeda, untuk lebih detailnya kalian bisa baca materi tersendiri tentang apa itu padding, margin dan border. Untuk materi kali ini akan dibahas dua bagian saja yaitu width dan height. Mengapa yang dibahas materi tentang width dan height atau lebar dan tinggi? Karena materi ini juga sangat penting dalam memahami lapisan box padding dan margin.
Baiklah, yang pertama adalah width atau ukuran lebar. Satuan yang digunakan untuk menentukan ukuran lebar itu ada banyak, tapi sebagai pemula kita gunakan saja satuan px atau pixel dan % atau persen. Perhatikan berikut ini contohnya
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <style>
  .text1 {
   width: 100px;
   border: 1px solid teal;
   border-radius: 5px;
  }
  .text2 {
   width: 100%;
   border: 1px solid teal;
   border-radius: 5px;
  }
 </style>
</head>
<body>
 <div class="text1">
  Elemen ini memiliki lebar 100 pixel
 </div><br>
 <div class="text2">
  Elemen ini memiliki lebar 100 persen
 </div>
</body>
</html>
Hasilnya


Pada contoh di atas, pada class text1 satuan width nya menggunakan px (pixel) sedangkan pada class text2 satuan width nya menggunakan % (persen) yang masing - masing memiliki lebar 100px. Cara menggunakan width dan height pada css ini cukup mudah, yang pertama cari selektor apa yang ingin di atur ukur lebarnya. Pada contoh di atas dipilih selektor class text1 dan text2 lalu berikan property width serta nilainya berapa sesuai keinginan.
Kemudian, yang kedua adalah height atau ukuran tingginya. Satuan yang digunakanpun sama yaitu pixel. Begitu pula cara penulisannya sama dengan cara penulisan width tadi. Kedua property pada css ini yaitu width dan height, bisa juga digunakan untuk menentukan ukuran lapisan box model seperti padding, margin dan konten. Silahkan tambahkan baris css berikut ini ke selektor text1 dan text2
height: 80px;
Hasilnya


Ada pertanyaan, mengapa satuan px dan % jauh berbeda? Tentu. Dan satuan % biasanya digunakan untuk membuat tampilan lebih responsiv.
Sekian materi tentang Box Model pada CSS. Sekali lagi untuk materi lebih detail dari tiap lapisan box model tadi bisa kalian buka materi tentang padding, margin dan border. Semoga bermanfaat dan terus ikuti materi – materi lainnya di blog ini.

Post a Comment for "Materi 12 : Box Model pada CSS"