Properti padding digunakan untuk jarak suatu text atau child element dari kontainer atau area tempat elemen HTML tersebut berada. Padding bisa kalian gunakan pada tabel, div, section, dan beberapa elemen HTML lain yang memiliki isi. Penggunaan padding relatif sama dengan penggunaan margin.
- padding => Penulisan singkat semua properti padding dengan satu kali deklarasi.
- padding-bottom => Atur padding bawah dari sebuah elemen HTML.
- padding-left => Atur padding kiri dari sebuah elemen HTML.
- padding-right => Atur padding kanan dari sebuah elemen HTML.
- padding-top => Atur padding atas dari sebuah elemen HTML.
.styleku{
padding-left:8px;
padding-top:32;
padding-right:64;
padding-bottom:80;
height:100%;
background : green;
color : brown;
}
.styleku1{
padding : 0px 4px 0px 16px;
color : magenta;
background : yellow;
}
.styleku2{
padding : 8px;
color : blue;
background : cyan;
}
Kode HTML-nya bisa kalian buat sendiri. Kalian juga bisa menggunakan kode HTML di bawah ini jika malas mengetik.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h2>Judul</h2>
<Div class= "styleku">
<div class="styleku1">
<p>ini paragraf 1</p>
<p>ini paragraf 2</p>
<p>ini paragraf 3</p>
<p>ini paragraf 4</p>
</div>
<div class="styleku2">
<p>ini paragraf 5</p>
<p>ini paragraf 6</p>
<p>ini paragraf 7</p>
<p>ini paragraf 8</p>
</div>
</div>
</BODY>
</HTML>
Sesuaikan nama file CSS-nya dengan nilai href pada tag link. Kalau kalian sudah belajar CSS eksternal, kalian seharusnya tidak bingung terkait dengan penamaan filenya.