Padding
adalah suatu area atau ruang di antara konten dan border.Property padding bisa diisi
dengan satuan panjang seperti pixel,persen,em,
dan seterusnya.Ilustrasinya adalah sebagai berikut (perhatikan bagian paddingnya)
:
Jadi
padding itu merupakan jarak antara content (tulisan/teks) yang berada di dalam
border dengan border itu sendiri.Sebagai contoh jika kita ingin membuat padding
seluas 10 pixel,maka kia bias menulis script seperti di bawah ini :
<div
style=”padding: 10px”></div>
Berikut
adalah contoh script untuk memainkan fungsi padding :
<!DOCTYPE
HTML>
<html>
<head>
<title>Padding</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>
Selain
itu,CSS juga menyediakan property masing-masing untuk sisi box agar kita bias mengatur
padding pada setiap sisi,yaitu dengan property padding-top, padding-right, padding-bottom dan padding-left.
Comments
Post a Comment