Mengatur Lapisan Atas HTML Menggunakan paddingTop Style DOM
Properti Style paddingTop DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai padding top dari suatu elemen. Properti padding menyisipkan ruang yang diinginkan pengguna di dalam batas elemen.
Sebelum memahami lebih dalam materi tentang Mengatur Lapisan Atas HTML Menggunakan paddingTop Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Lapisan Kanan HTML Menggunakan paddingRight Style DOM [klik], Mengatur Lapisan Kiri HTML Menggunakan paddingLeft Style DOM [klik], dan Mengatur Lapisan Bawah HTML Menggunakan paddingBottom Style DOM [klik].
Sintak:
Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan nilai padding top dari suatu elemen.
Property Values:
Berikut adalah ilustrasi program dari properti style paddingTop.
Contoh: pengaturan padding top dari elemen DIV.
 |
| Properti paddingTop Style DOM |
Sintak:
- digunakan untuk mendapatkan nilai properti: object.style.paddingTop
- digunakan untuk mengatur nilai properti: object.style.paddingTop = "%|length|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan nilai padding top dari suatu elemen.
Baca Juga:
Property Values:
- %: digunakan untuk mendefinisikan padding top dalam satuan persen dari lebar elemen parent.
- length: digunakan untuk mendefinisikan padding top 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 dari properti style paddingTop.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style paddingTop 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 paddingTop
</h2>
<p>
Untuk mengatur nilai padding
top, double klik pada tombol
"Apply Top Padding":
</p>
<br>
<button
ondblclick="padding()">
Apply Top Padding
</button>
<div id="MyElement">
Selamat datang di alfamart.
</div>
<script>
function padding()
{
document.getElementById("MyElement")
.style.paddingTop = "100px";
}
</script>
</body>
</html>
Output:
Blog Elfan
Properti Style paddingTop
Untuk mengatur nilai padding top, double klik pada tombol "Apply Top Padding":
Selamat datang di alfamart.
Referensi Tambahan:
- 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]
- 5 Value Properti Right Style DOM pada HTML [klik]
- 4 Contoh Properti tableLayout Style DOM pada HTML [klik]
- 4 Value Properti tabSize Style DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Dimas Achmad Noor Afnan Albuqowiyyu, Dina Agustianingsih, Dinar Hari Syahputra, Dinda Suci Anggraeni, dan Dionicius Cita Buana Liman.
Jenis-jenis browser seperti apa saja yang dapat digunakan untuk mengaktifkan properti paddingTop Style DOM pada HTML?
BalasHapusBerikut ini adalah beberapa daftar browser populer yang dapat digunakan pengembang untuk mengaktifkan properti paddingTop Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti paddingTop Style DOM pada HTML?
BalasHapusProperti paddingTop Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai padding atas dari suatu elemen.
HapusProperti paddingTop Style DOM pada HTML merupakan properti yang digunakan untuk mengatur nilai padding atas elemen pada dokumen HTML.
Hapus