Apa itu padding ?
Padding adalah ruang yang memisahkan antara border dan content di element HTML.
Perhatikan simulasi di bawah ini:
Secara default, padding element HTML memiliki luas 0px. Dengan CSS kita dapat menentukan luas padding sesuai dengan selera kita.
Luas padding dinyatakan dengan satuan px, mm, cm, in, pt, pc, em, ex, ch, rem dan persen (%). dari sekian banayaknya satuan yang di dukung oleh CSS, setidaknya ada empat satuan yang paling sering di gunakan, yakni px, em, pt dan%.
Ada tiga cara untuk mengatur luas padding di CSS yakni Global padding , Individual side dan Shorthand Property.
Global Padding di CSS
Cara mengatur padding dengan mode global padding memberikan luas padding sama rata nilainya mulai dari padding atas, padding kanan, padding bawah dan padding kiri.
Contoh menentukan lusa ruang padding element HTML dengan CSS sebagai berikut:
Contoh Padding di CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.el1 {
border:1px solid blue;
}
.el2 {
border:1px solid blue;
padding:10px;
}
</style>
</head>
<body>
<p class="el1" >Ini adalah element satu</p>
<p class="el2" >Ini adalah element dua</p>
</body>
</html>
Preview
Ini adalah element satu
Ini adalah element dua
Global padding hanya membutuhkan satu nilai dan nilai tersebut di terapakan untuk semua padding (atas, kanan, bawah, kiri) pada element html secara merata.
Perhatikan contoh element dengan class el1 dan el2 di atas, el1 padinggnya tidak di atur, berarti element el1 padingganya masih dalam keadaan default yakni dan nilai 0. Sedangkan untuk element dengan class el2, paddingnya kita set dengan nilai padding:10px; artinya, semua padding yang berada di sisi atas, kanan, bawah dan kiri masing-masing luasnya adalah 10px.
Padding Individual side
Metode penulisan padding dengan cara individu yaitu menentukan property padding yang di tuju agar berdiri sendiri tanpa mengikuti satu nilai padding saja.
Ada tiga property padding individual side untuk menebtukan luas tiap-tiap padding di CSS yaitu padding-top, padding-right, padding-bottom dan padding-left.
Contoh padding individual side di CSS sebagai berikut:
Contoh individual side CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.el1 {
border:1px solid blue;
}
.el2 {
border:1px solid blue;
padding-top:10px;
padding-right:15px;
padding-bottom:20px;
padding-right:25px;
}
</style>
</head>
<body>
<p class="el1" >Ini adalah element satu</p>
<p class="el2" >Ini adalah element dua</p>
</body>
</html>
Preview
Ini adalah element satu
Ini adalah element dua
Perhatikan CSS padding di atas,
padding-top:10px;
padding-right:15px;
padding-bottom:20px;
padding-right:25px;
dengan metode idividual padding kita dapat menentukan sendiri luas ruang padding tiap-tipa sisi dari elemet HTML.
Padding Shorthand Property
Metode Shorthand property adalah menentukan luas ruang padding yang nilainya berbeda-beda tiap sisi padding elementnya.
Metode ini sebenarnya sama seperti Padding Individual side. bedanya, Metode ini hanya Membutuhkan satu property saja untuk mengatur luas masing-masing padding element HTML.
Contoh Shorthand padding sebagai berikut:
Contoh shorthand padding CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.el1 {
border:1px solid blue;
}
.el2 {
border:1px solid blue;
padding:10px 15px 20px 24px;
}
</style>
</head>
<body>
<p class="el1" >Ini adalah element satu</p>
<p class="el2" >Ini adalah element dua</p>
</body>
</html>
Preview
Ini adalah element satu
Ini adalah element dua
Artinya padding:10px 15px 20px 24px; kita hanya menggunakan satu property padding dan memberi nilai kepada tiap sisi padding element dengan valua 10px 15px 20px 24px;.
Value property padding di atas definisinya sebagai berikut: