Box dalam CSS

Posted by on
Konsep Box Model menganggap bahwa setiap elemen yang ada di dalam halaman website diletakkan dan diproses di dalam kotak (box).Artinya,elemen-elemen seperti paragraf, header, form, gambar, logo, video dan elemen lainnya ditampilkan di dalam area-area persegi empat.

Keuntungan menggunakan konsep Model Box ini adalah mendapat kemudahan layout.Karena diletakkan di dalam kotak-kotak,maka posisi elemen-elemen yang ada di dalamnya dapat dipindahkan dan ditata letakkan sesuka hati.

Karena berbentuk Box,maka masing-masing elemen HTML ini dibentuk dari 4 laisan yaitu konten/isi, padding, border, dan margin.

Untuk lebih jelas,lihatlah gambar di bawah ini :

Konsep CSS Box Model

PROPERTY PEMBENTUK BOX MODEL

Seperti gambar di atas,kita bisa melihat 5 property yang menyusun box model,yaitu width, height, border, padding, dan margin.
  • Konten (content) berada di bagian tengah dari box.Kita bisa mengatur lebar dan tinggi konten menggunakan property width dan height.
  • Padding adalah jarak antara konten dengan garis tepi (border) element.Padding digunakan agar teks yang ada di dalam box tidak menyentuh sisi dari dalam sebuah sel tabel.
  • Border merupakan garis tepi pembatas element.Kita bisa mengatur border, seperti ketebalan border, warna, dan jenis garis yang digunakan.
  • Margin adalah jarak dari sebuah element dengan element lain yang ada di sekitarnya.Margin bersifat transparan dan digunakan agar setiap elemen tidak bertabrakan.
NOTE !
Perbedaan Margin dan Padding :

Misalkan kita membuat satu box dengan Margin 10px, maka space kosong dari border table ke arah luar sebesar 10px tadi adalah MARGIN.Lalu jika membuat satu table dengan padding 5px, maka space kosong antara border dengan content adalah PADDING.Gunakan border pada table kamu dan akan lebih kelihatan jelas perbedaannya.

Untuk lebih jelasnya,silahkan ketikkan script di bawah ini :

<!DOCTYPE HTML>
<html>
<head>
<title>Menggunakan Box</title>
<style type="text/css">

p { border: 10px;
 border-style: ridge;
 border-color: #FF3345;
 margin: 20px;
 background-color: aqua;
 width: 500px;
 height: 100px;
 padding: 25px;
 
}

</style>
</head>

<body>

<p>Teks ini akan berada di dalam box</p>

</body>
</html>

Hasil Penggunaan Box model pada CSS


Membuat Border

Untuk membuat garis tepi box dengan CSS,kita bisa menggunakan property border.Property ini membutuhkan paling tidak 3 nilai yaitu tebal border,style border dan warna border untuk membuat border lebih bagus.Contohnya adalah sebagai berikut :

div {border: 20px solid red}
Keterangan : 20px adalah ukuran lebar garis tepi box
                      solid adalah model dari border tersebut.
                      red adalah warna dari border tersebut

Cara lainnya adalah sebagai berikut :

div {border-width: 20px;
        border-style: ridge;
        border-color: aqua;
       }

Ada beberapa style dari box yaitu ridge,solid,groove,inset,outset,dotted, dan dashed. Silahkan diganti stylenya sesuai dengan keinginan anda ^ ^

Contoh Scriptnya adalah sebagai berikut :

<!DOCTYPE HTML>
<html>
<head>
<title>Membuat Border</title>
<style type="text/css">

div { border-width:20px;
 border-style: ridge;
 border-color: aqua;
 height: 100px;
 padding: 25px;
 margin: 20px;
 color: white;
 background-color:#363636;
 }
.lebar {width: 50%;}
</style>

</head>

<body>

<div class="lebar">Belajar CSS menyenangkan ! </div>

</body>
</html>



Cara Mengatur Lebar Element HTML

Untuk mengatur lebar element HTML dengan CSS,kita bisa menggunakan property width.Sebagai contoh, untuk membuat lebar sebuah tag <div> menjadi 500 pixel,Anda bisa menulis seperti ini :

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

Contoh,silahkan ketikkan script di bawah ini :

<!DOCTYPE HTML>
<html>
<head>
<title>Mengatur Lebar Element</title>

<style type="text/css">

div { height: 100px;
 padding: 25px;
 border: 20px;
 border-style: ridge;
 margin=" 20px;
 background-color: aqua;
}

.lebar {width: 500px;}

</style>
</head>

<body>

<div class="lebar"> Teks ini pasti berada di dalam kotak</div>

</body>
</html>

Penggunaan Width dalam sebuah Class

Menggunakan Ukuran Relatif

Selain ukuran yang bersifat tetap,kita juga bisa menggunakan satuan ukur relatif seperti persen.Contohnya ketikkan script di bawah ini :

<!DOCTYPE HTML>
<html>
<head>
<title>Menggunakan Ukuran Relatif</title>
<style type="text/css">

div { border: 10px;
 border-style: ridge;
 margin: 20px;
 padding: 25px;
 height: 200px;
 background-color: #TTRREE;  
}

.lebar {width: 50%;}
</style>

</head>

<body>

<div class="lebar">Teks ini akan berada di dalam sebuah kotak dengan ukuran lebar 50 persen dari layar komputer kita</div>

</body>
</html>


Dengan menmberi nilai dalam satuan persen,maka lebar dari tag div akan menyesuaikan dengan lebar web browser.Artinya jika jendela web browser dikecilkan,maka ukuran box juga akan mengikuti (mengecil).Silahkan dicoba sendiri ^ ^

Mengatur Tinggi Elemen CSS

Cara menggunakan property height sama dengan penggunaan property width,dimana kita tinggal memberikan nilai dan satuan panjang seperti yang kita inginkan.Contoh untuk mengatur tinggi sebuah tag <div> sebesar 200 pixel adalah sebagai berikut :

<div style="height: 200px"></div>

Jika width dan height ingin diatur sejak awal dengan menggunakan CSS maka kita bisa menuliskannya seperti ini :

div { width: 200px; height: 50px;}


Variasi Border Tiap Sisi

Pada kode HTML dan CSS,browser akan menampilkan bingkai untuk semua sisi dengan model yang sama saja.Tetapi sebenarnya ,CSS memiliki property untuk mengatur masing-masing tepi garis box dengan style yang berbeda.

Property tersebut adalah :
  • border-top (atas)
  • border-right (kanan)
  • border-left (kiri)
  • border-bottom (bawah)
Berikut adalah contoh scriptnya :

<!DOCTYPE HTML>
<html>
<head>
<title>Membuat Border</title>
<style type="text/css">

div { border-top: ridge 20px green;
 border-right: dashed 20px red;
 border-left: double 20px aqua;
 border-bottom: groove 20px blue;
 height: 100px;
 padding: 25px;
 margin: 20px;
 background-color:#363690;
 }
.lebar {width: 50%;}
</style>

</head>

<body>

<div class="lebar">Belajar CSS menyenangkan ! </div>

</body>
</html>


Sekian pembahasan seputar konsep Box dalam CSS.Jika ada yang kurang jelas bisa ditanyakan di kolom komentar ^ ^ .Semoga bermanfaat.Terima kasih !

Comments

Post a Comment