Tutorial CSS terusan- 10 box model ~ infoku.net

Pengertian CSS Box Model

CSS Box Model adalah sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai ‘box’.
Sebagaimana layaknya ‘kotak’, masing-masing element HTML ini terdiri dari 4 lapisan, yakni: konten (isi), padding, border dan margin. Keempat ‘lapisan’ inilah yang membangun CSS Box Model.
Agar lebih mudah dipahami, perhatikan gambar CSS Box Model berikut (sumber: www.w3c.org):

Property CSS Penyusun Box Model

Dari gambar diatas, terdapat 5 property CSS yang menyusun box model, yakni width, height, border, padding, dan margin.

Konten atau teks dari sebuah element berada di bagian tengah. Kita bisa mengatur lebar dan tinggi konten ini menggunakan property width dan height.
Selanjutnya, terdapat padding. Padding adalah jarak antara konten dengan garis tepi (border) element. Sebagai contoh, jika kita membuat sebuah teks tanpa padding, maka teks tersebut akan mulai persis setelah garis tepi. Padding biasa ditambahkan supaya teks tidak menyentuh sisi dalam dari sebuah sel tabel.
Setelah padding, berikutnya: border. Border merupakan garis tepi pembatas element. Kita bisa mengatur berbagai hal tentang border, seperti ketebalan, warna, dan jenis garis yang digunakan.
Di lapisan terakhir terdapat margin. Margin adalah ‘spasi’ dari sebuah element dengan element lain di sekelilingnya. Margin bersifat transparan dan digunakan agar setiap element tidak saling menempel satu sama lain.
Berikut contoh penggunaan ke 5 property ini di dalam CSS:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Belajar CSS</title>

  <style>

    div, p {

      width: 300px;

      height: 50px;

      padding: 15px;

      border: 5px solid red;

      margin: 20px;

      background-color: yellow;

    }

  </style>

</head>

<body>

  <div>Box 1</div>

  <p>Box 2</p>

</body>

</html>

Dalam contoh diatas saya membuat 2 buah element HTML: tag <div> dan tag <p>. Kedua element ini di-style menggunakan kode CSS yang sama.

Cara Mengatur Lebar Element HTML dengan CSS

Untuk mengatur lebar element HTML dengan CSS, kita bisa menggunakan propety width. Property ini diisi dengan satuan seperti pixel, persen, em, dll.
Sebagai contoh, untuk membuat lebar sebuah tag <div> menjadi 400 pixel, saya bisa menulis sebagai berikut:

<div style="width: 400px"></div>

Dalam contoh ini saya menggunakan inline style CSS. Jika menggunakan internal style CSS, kita tinggal menempatkannya ke dalam tag <style>, seperti berikut ini:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   div {

     height: 50px;

     border: 2px solid black;

     margin: 20px;

     background-color: yellow;

   }

   .kotak1 { width: 10px;}

   .kotak2 { width: 50px;}

   .kotak3 { width: 100px;}

   .kotak4 { width: 500px;}

   .kotak5 { width: 1000px;}

</style>

</head>

<body>

<div class="kotak1"></div>

<div class="kotak2"></div>

<div class="kotak3"></div>

<div class="kotak4"></div>

<div class="kotak5"></div>

</body>

</html>

Dalam contoh diatas saya membuat 5 tag <div> dengan lebar yang berbeda-beda. Setiap lebar diatur menggunakan property width.

Selain menggunakan satuan yang tetap seperti pixel, kita juga bisa menggunakan satuan relatif seperti persen. Berikut contohnya:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   div {

     height: 50px;

     border: 2px solid black;

     margin: 20px;

     background-color: yellow;

   }

   .kotak1 { width: 20%;}

   .kotak2 { width: 70%;}

   .kotak3 { width: 90%;}

</style>

</head>

<body>

<div class="kotak1"></div>

<div class="kotak2"></div>

<div class="kotak3"></div>

</body>

</html>

Dengan memberikan nilai dalam satuan persen, sekarang lebar dari tag <div> akan menyesuaikan tergantung lebar web browser. Silahkan anda mengubah lebar jendela web browser, maka lebar dari setiap kotak juga akan mengikuti.
Tapi, bagaimana contoh implementasi sebenarnya dari property width ini?
Langsung saja kita lanjut ke contoh berikutnya:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   .paragraf2 { width: 400px;}

   .paragraf3 { width: 50%;}

</style>

</head>

<body>

<p>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi 

   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam 

   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat 

   felis, sit amet ullamcorper elit vulputate in.

</p>

<p class="paragraf2">

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi 

   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam 

   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat 

   felis, sit amet ullamcorper elit vulputate in.

</p>

<p class="paragraf3">

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi 

   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam 

   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat 

   felis, sit amet ullamcorper elit vulputate in.

</p>

</body>

</html>

Kali ini saya membuat 3 buah paragraf yang berisi dummy teks (lorem ipsum). Pada paragraf pertama, saya tidak menggunakan property apa-apa. Terlihat bahwa secara default, sebuah paragraf akan melebar memenuhi parent element, yang pada contoh diatas akan melebar sepanjang lebar web browser.

Dalam paragraf kedua dan ketiga saya mengatur lebarnya dengan property width, sehingga lebar paragraf akan dibatasi.ok itu aja sekian dulu dari saya kita lanjut lagi ke tuuorial berikutnya.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.