Lompat ke konten Lompat ke sidebar Lompat ke footer

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

Property Values:
  • %: 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.

Artikel ini didedikasikan kepada: Dhani Ahmad Muzadi, Diana Anggita Putri, Dicki Gusti Wahyudi, Dimas Achmad Noor Afnan Albuqowiyyu, dan Dina Agustianingsih.

5 komentar untuk "Mengatur Lapisan Bawah HTML Menggunakan paddingBottom Style DOM"

  1. Jenis browser-browser apa saja yang dapat digunakan oleh pembuat web untuk mengaktifkan properti paddingBottom Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini beberapa jenis browser yang biasa digunakan untuk mengaktifkan properti paddingBottom Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

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

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

      Hapus
    2. Properti 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

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 -