Box Model - Height dan Width

Sumber :laptrinhx.com

7. Property CSS

      a)     Box Model

                merupakan sebuah konsep dimana setiap elemen halaman website kita anggap seabgai sebuah kotak (box). Box inilah yang akan kemudian membangun struktur desain dan layout dari website. Pembahasan yang akan kita pelajari meliputi :

        1. Height dan Width

            2. Margin dan Padding

            3. Border dan Outline

            4. Position

            5. Overflow

            6. Float dan Clear

            7. Display dan Visibility

Masing-masing keterangannya sebagai berikut :

1. Height dan Width

  • - Property height menentukan tinggi box
  • - property Width menentukan lebar box
  • - Nilai dari property ini merupakan angka dengan satuan biasanya px atau % 

Property lain yang berhubungan dengan width dan height sebagai berikut :

  • >Max-width, lebar menyesuaikan konten tetapi tidak melebihi batas yang ditentukan.
  • >Max-height, tinggi menyesuaikan konten tetapi tidak melebihi batas yang ditentukan.
  • >Min-widthlebar menyesuaikan konten tetapi tidak kurang dari batas yang ditentukan.
  • >Min-height, tinggi menyesuaikan konten tetapi tidak kurang dari batas yang ditentukan.

Berikut adalah contoh script penggunaan width dan height dengan nama file width height.html sebagai berikut : 

<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.kotak{
    background:red;
    width:200px;
    height:100px;

}
</style>
</head>
<div class="kotak"></div>
</html> 

 Pada website akan terlihat sebagai berikut :

 
Kita ubah ukurab width dan height ke max
<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.kotak{
    background:red;
    min-width:200px;
    min-height:100px;

}
</style>
</head>
<div class="kotak"></div>
</html>

  Pada website akan terlihat sebagai berikut :

 Semoga bermanfaat buat sobat yang baru tauπŸ‘ŠπŸ‘ŠπŸ‘‹πŸ˜‰ 

Posting Komentar

0 Komentar

Comments