Untuk dapat melayout disain web dengan baik kita harus mengetahui bagaimana box model dalam css. Property-property yang penting kita ketahui adalah
- width
- padding
- border
- margin
Untuk mempermudah marilah kita membuat html dengan coding seperti ini
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>CSS Box Model</title>
<style type=”text/css”>
#luar
{
background-color:blue;
}
#utama
{
width: 200px;
background-color: yellow;
padding-left: 10px;
padding-right: 30px;
border-left-width: 20px;
border-right-width: 40px;
border-left-color: green;
border-right-color: red;
border-left-style: solid;
border-right-style: solid;
margin-left:40px;
margin-right:50px;
}
#kotak
{
width: auto;
height: auto;
background-color: purple;
position: relative;
margin: auto;
color:white;
}
</style> </head>
<body>
<div id=”luar”>
<div id=”utama”>
<div id=”kotak”>yang ini 200px</div>
Tanda paku di kaki dan tangan, tanda cinta, tanda cinta.
<br/>Tanda tombak menusuk di pinggang, tanda cintanya Tuhan.
<br/>Itu semua Tuhan telah terima, untuk keselamatan manusia.
</div>
</div>
</body>
</html>
Hasil dari coding di atas bisa dilihat pada gambar di bawah ini:
Perhatikan CSS berikut:
#utama
{
width: 200px;
background-color: yellow;
padding-left: 10px;
padding-right: 30px;
border-left-width: 20px;
border-right-width: 40px;
border-left-color: green;
border-right-color: red;
border-left-style: solid;
border-right-style: solid;
margin-left:40px;
margin-right:50px;
}
Perhatikan bahwa width 200 px ditunjukkan dengan tulisan ungu ‘yang ini 200px’.
Untuk padding-left dengan ukuran 10 px adalah warna kuning di sebelah kiri tulisan, sedangkan padding-right dengan ukuran 30 px di sebelah kanan tulisan.
Property border-left dengan ukuran 20 px ditunjukkan warna hijau, property border-right dengan ukuran 40 px ditunjukkan warna merah.
Margin left sebesar 40px ditunjukkan oleh warna biru sebelah kiri, sedangkan margin-right mengikuti sisa width dari #luar.
Hasil juga dapat dilihat di http://aris.proweb.asia/css_box_model.html .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.