Mengatur Lapisan Bawah HTML Menggunakan paddingBottom Style DOM
Properti Style paddingBottom DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai padding bottom dari suatu elemen. Properti padding menyisipkan ruang yang diinginkan pengguna di dalam batas elemen.
Sebelum memahami lebih dalam materi tentang Mengatur Lapisan Bawah HTML Menggunakan paddingBottom Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Nilai Lapisan HTML Menggunakan Padding Style DOM [klik], Properti overflowY Style HTML DOM dan Fungsinya [klik], dan Properti overflowX Style HTML DOM dan Fungsinya [klik].
Sintak:
Return Values: berfungsi untuk mengembalikan sebuah string, yang merepresentasikan padding bottom dari suatu elemen.
Property Values:
Berikut adalah ilustrasi program properti paddingBottom Style.
Contoh: pengaturan padding bottom dari elemen DIV.
 |
| Properti paddingBottom Style DOM |
Sintak:
- untuk mendapatkan nilai properti: object.style.paddingBottom
- untuk mengatur nilai properti: object.style.paddingBottom = "%|length|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah string, yang merepresentasikan padding bottom dari suatu elemen.
- %: digunakan untuk mendefinisikan padding bottom dalam satuan persen dari lebar elemen parent.
- length: digunakan untuk mendefinisikan padding bottom dalam satuan unit length.
- initial: digunakan untuk mengatur nilai properti menjadi nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.
Berikut adalah ilustrasi program properti paddingBottom Style.
Baca Juga:
Contoh: pengaturan padding bottom dari elemen DIV.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style paddingBottom
pada HTML
</title>
<style>
#MyElement
{
border: 1px solid black;
background-color: green;
width: 300px;
height: 300px;
}
h1
{
color: green;
}
h2
{
font-family: Impact;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style paddingBottom
</h2>
<p>
Untuk mengatur padding bottom,
double klik pada tombol "Apply
Bottom Padding":
</p>
<br>
<button
ondblclick="padding()">
Apply Bottom Padding
</button>
<div id="MyElement">
Selamat datang di indomaret.
</div>
<script>
function padding()
{
document.getElementById("MyElement")
.style.paddingBottom = "100px";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style paddingBottom
Untuk mengatur padding bottom, double klik pada tombol "Apply Bottom Padding":
Selamat datang di indomaret.
Referensi Tambahan:
- 8 Value Properti pageBreakBefore Style DOM pada HTML [klik]
- 4 Value Properti pageBreakInside Style DOM pada HTML [klik]
- 4 Value Properti Perspective Style DOM pada HTML [klik]
- 3+ Value Properti perspectiveOrigin Style DOM pada HTML [klik]
- 7 Value Properti Position Style DOM pada HTML [klik]
- 11 Karakter Tanda Kutip Style DOM pada HTML [klik]
- 6 Value Properti Resize Style DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Dhani Ahmad Muzadi, Diana Anggita Putri, Dicki Gusti Wahyudi, Dimas Achmad Noor Afnan Albuqowiyyu, dan Dina Agustianingsih.
Jenis browser-browser apa saja yang dapat digunakan oleh pembuat web untuk mengaktifkan properti paddingBottom Style DOM pada HTML?
BalasHapusBerikut ini beberapa jenis browser yang biasa digunakan untuk mengaktifkan properti paddingBottom Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti paddingBottom Style DOM pada HTML?
BalasHapusProperti paddingBottom Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai padding bottom dari suatu elemen.
HapusProperti paddingBottom merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai padding bottom dari suatu elemen, baik itu berupa properti margin ataupun properti padding yang disisipkan pada ruang sekitar elemen.
Hapus