HTML DOM 스타일 marginBottom 속성 완벽 가이드 - 하단 마진 설정과 반환 방법

DOM의 style.marginBottom 속성은 HTML 문서에서 요소의 하단 바깥 여백(margin-bottom)을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 요소 간의 세로 간격을 동적으로 조절할 수 있습니다.

문법(Syntax)

marginBottom 속성의 기본 문법은 다음과 같습니다.

1. marginBottom 값 반환하기

object.style.marginBottom

2. marginBottom 값 설정하기

object.style.marginBottom = "value"

값에는 px, em, rem 등 다양한 CSS 단위를 사용할 수 있으며, 초기값은 0입니다.

예제(Example)

버튼을 클릭하면 단락(p) 요소의 하단 마진이 추가되는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style marginBottom Property Example</h1>
<p>
    Hi! I'm awesome paragraph with some random text.
    Hi! I'm awesome paragraph with some random text.
    Hi! I'm awesome paragraph with some random text.
    Hi! I'm awesome paragraph with some random text.
</p>
<button onclick="add()" class="btn">Add margin</button>
<script>
    function add() {
        document.querySelector('p').style.marginBottom = "50px";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 스타일 marginBottom 속성 완벽 가이드 - 하단 마진 설정과 반환 방법

이 상태에서 “Add margin” 버튼을 클릭하면, 자바스크립트가 실행되어 단락 요소에 50px의 하단 마진이 적용됩니다.

HTML DOM 스타일 marginBottom 속성 완벽 가이드 - 하단 마진 설정과 반환 방법

정리

marginBottom 속성은 인라인 스타일로 동작하기 때문에 CSS보다 우선순위가 높습니다. 버튼 클릭, 사용자 이벤트 등 특정 조건에 따라 요소의 하단 여백을 실시간으로 변경해야 할 때 유용하게 활용할 수 있습니다. 참고로 marginTop, marginLeft, marginRight 속성도 같은 방식으로 사용 가능합니다.