Mengatur Batas Bawah HTML Menggunakan marginBottom Style DOM
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].
- 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.
- 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>
Blog Elfan
Properti Style marginBottomContoh:
<!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>
Blog Elfan
Properti Style marginBottom DOMContoh:
<!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>
Blog Elfan
Properti Style marginBottom DOMContoh:
<!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>
Blog Elfan
Properti Style marginBottom DOMContoh:
<!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>
Blog Elfan
Properti Style marginBottom DOM- 5 Value Properti maxWidth Style DOM pada HTML [klik]
- 4 Value Properti minHeight Style DOM pada HTML [klik]
- 4 Value Properti minWidth Style DOM pada HTML [klik]
- 7 Value Properti objectFit Style DOM pada HTML [klik]
- 3 Contoh Properti objectPosition Style DOM pada HTML [klik]
- 3 Value Properti Opacity Style DOM pada HTML [klik]
- 3 Value Properti Order Style DOM pada HTML [klik]
5 komentar untuk "Mengatur Batas Bawah HTML Menggunakan marginBottom Style DOM"
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 -
Ada berapa jenis browser yang dapat digunakan untuk mengaktifkan properti marginBottom Style DOM pada HTML?
BalasHapusBerikut ini adalah daftar dari beberapa jenis browse yang dapat digunakan untuk mengaktifkan properti marginBottom Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti marginBottom Style DOM pada HTML?
BalasHapusProperti 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.
HapusProperti marginBottom Style DOM pada HTML merupakan properti yang digunakan untuk mengembalikan dan memodifikasi marginBottom elemen dalam dokumen HTML.
Hapus