Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

4 Value Properti paddingTop Style DOM pada HTML
Properti paddingTop Style DOM

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:
  • 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.

Contoh: pengaturan padding top dari elemen DIV.

<!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.

Artikel ini didedikasikan kepada: Dimas Achmad Noor Afnan Albuqowiyyu, Dina Agustianingsih, Dinar Hari Syahputra, Dinda Suci Anggraeni, dan Dionicius Cita Buana Liman.

5 komentar untuk "Mengatur Lapisan Atas HTML Menggunakan paddingTop Style DOM"

  1. Jenis-jenis browser seperti apa saja yang dapat digunakan untuk mengaktifkan properti paddingTop Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini adalah beberapa daftar browser populer yang dapat digunakan pengembang untuk mengaktifkan properti paddingTop Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

      Hapus
  2. Apa yang dimaksud dengan properti paddingTop Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti paddingTop Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai padding atas dari suatu elemen.

      Hapus
    2. Properti paddingTop Style DOM pada HTML merupakan properti yang digunakan untuk mengatur nilai padding atas elemen pada dokumen HTML.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -