Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Batas Bawah HTML Menggunakan marginBottom Style DOM

Properti Style marginBottom DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai margin bottom dari suatu elemen.

Sebelum memahami lebih dalam materi tentang Mengatur Batas Bawah HTML Menggunakan marginBottom Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Ukuran Batas HTML Menggunakan Margin Style DOM [klik], Mengatur Daftar Tipe HTML Menggunakan listStyleType DOM [klik], dan Mengatur Daftar Posisi HTML Menggunakan listStylePosition Style DOM [klik].

Sintak:
  • digunakan untuk mengembalikan nilai margin bottom dari suatu elemen: object.style.marginBottom
  • digunakan untuk mengatur nilai margin bottom dari suatu elemen: object.style.marginBottom = "length|percentage|auto|initial|inherit"

Return Values: digunakan untuk mengembalikan sebuah nilai string yang merepresentasikan nilai margin bottom dari suatu elemen.

Baca Juga:

Property Values:
  • length: digunakan untuk mengatur nilai margin untuk unit yang bersesuaian, dengan nilai default adalah 0.
  • percentage: digunakan untuk menentukan jumlah margin seperti nilai persen relatif untuk nilai lebar dari elemen yang dikandung.
  • auto: jika value diatur menjadi 'auto', maka browser secara otomatis akan mengkalkulasikan nilai yang cocok terhadap ukuran margin tersebut.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan dari elemen parent.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style marginBottom 

DOM

</title>

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style marginBottom

</b>

 

<div

class="container">


<div

class="div1">

Line One

</div>


<div

class="div2">

Line Two

</div>


<button 

onclick="setMargin()">

Change marginBottom

</button>


</div>

 

<!-- Script untuk mengatur 

margin bottom -->

<script>

function setMargin() 

{

elem = document.querySelector('.div1');

elem.style.marginBottom = '50px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style marginBottom
Line One
Line Two


Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style marginBottom 

DOM

</title>

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style marginBottom 

DOM

</b>

 

<div

class="container">


<div

class="div1">

Line One

</div>


<div

class="div2">

Line Two

</div>


<button

onclick="setMargin()">

Change marginBottom

</button>


</div>

 

<!-- Script untuk mengatur 

margin bottom -->

<script>

function setMargin() 

{

elem = document.querySelector('.div1');

elem.style.marginBottom = '10%';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style marginBottom DOM
Line One
Line Two


Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style marginBottom 

DOM

</title>

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style marginBottom 

DOM

</b>

 

<div 

class="container">

 

<div 

class="div1" 

style="margin-bottom:50px;">

Line One

</div>

 

<div 

class="div2">

Line Two

</div>

 

<button 

onclick="setMargin()">

Change marginBottom

</button>

 

</div>

 

<!-- Script untuk mengatur 

margin bottom -->

<script>

function setMargin() 

{

elem = document.querySelector('.div1');

elem.style.marginBottom = 'auto';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style marginBottom DOM
Line One
Line Two


Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style marginBottom 

DOM

</title>

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style marginBottom 

DOM

</b>

 

<div 

class="container">

 

<div 

class="div1" 

style="margin-bottom:50px;">

Line One

</div>

 

<div 

class="div2">

Line Two

</div>

 

<button 

onclick="setMargin()">

Change marginBottom

</button>

 

</div>

 

<!-- Script untuk mengatur 

margin bottom -->

<script>

function setMargin() 

{

elem = document.querySelector('.div1');

elem.style.marginBottom = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style marginBottom DOM
Line One
Line Two


Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style marginBottom 

DOM

</title>

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style marginBottom 

DOM

</b>

 

<div 

class="container" 

style="margin-bottom:50px;">

 

<div 

class="div1">

Line One

</div>

 

<div 

class="div2">

Line Two

</div>

 

<button 

onclick="setMargin()">

Change marginBottom

</button>

 

</div>

 

<!-- Script untuk mengatur 

margin bottom -->

<script>

function setMargin() 

{

elem = document.querySelector('.div1');

elem.style.marginBottom = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style marginBottom DOM
Line One
Line Two

Artikel ini didedikasikan kepada: Asri Lita Sari, Aurelia Arini Arthatami, Azzahra Andhira Putri, A'Lamuna Yustika Amini, dan Bekti Prihanto.

5 komentar untuk "Mengatur Batas Bawah HTML Menggunakan marginBottom Style DOM"

  1. Ada berapa jenis browser yang dapat digunakan untuk mengaktifkan properti marginBottom Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini adalah daftar dari beberapa jenis browse yang dapat digunakan untuk mengaktifkan properti marginBottom Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

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

    BalasHapus
    Balasan
    1. Properti style marginBottom DOM pada html merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai margin bawah dari suatu elemen. Baik properti margin dan properti padding keduanya dapat digunakan untuk menyisipkan ruang atau spasi pada sekitar elemen yang dikenainya. Namun, perbedaan dari kedua properti tersebut adalah properti margin menyisipkan ruang pada sekitar daerah perbatasan, sedangkan properti padding menyisipkan ruang di dalam elemen batas.

      Hapus
    2. Properti marginBottom Style DOM pada HTML merupakan properti yang digunakan untuk mengembalikan dan memodifikasi marginBottom elemen dalam 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 -