프로그래밍/HTML & CSS
CSS - margin 마진 겹침 현상
Heidong
2021. 9. 22. 18:46
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 200px;
border: 2px dotted gray;
}
.h { height: 100px; }
.m { margin: 20px; }
.p { padding: 1px; }
.b { border: 1px solid rgba(0,0,0,0); }
.orange{ background: orange; }
.yellow { background: #ff0; }
.green { background: #0f0; }
</style>
</head>
<body>
<h3>마진 겹침 현상-block 에서는 top와 bottom 마진이 겹칠 수 있다.</h3>
<!-- 좌우는 모두 마진이 적용 되지만 상하는 한번만 적용 -->
<div class="box">
<div class="orange m">
<div class="yellow m">
<div class="green m h">A</div>
</div>
</div>
</div>
<hr>
<!-- 마진 겹침 현상을 padding로 해결 -->
<div class="box">
<div class="orange m p">
<div class="yellow m p">
<div class="green m h p">A</div>
</div>
</div>
</div>
<hr>
<!-- 마진 겹침 현상을 border 로 해결 -->
<div class="box">
<div class="orange m b">
<div class="yellow m b">
<div class="green m h b">A</div>
</div>
</div>
</div>
<hr>
<!-- 마진 겹침 현상을 inline-block 로 해결 -->
<div class="box">
<div class="orange m" style="display: inline-block;">
<div class="yellow m" style="display: inline-block;">
<div class="green m h" style="display: inline-block;">A</div>
</div>
</div>
</div>
</body>
</html>
A의 경우 마진 옵션이 전부 20px 씩 들어갔지만 상하는 모두 동일한걸 보면
좌우는 20px 전부 들어갔지만 상하는 한번만 들어간 모습을 확인 할 수있다.
이 문제를 해결하기 위해서 padding 옵션을 주면 된다.
각 모든 내부 요소에 패딩을 주면 된다.
오렌지 노랑 초록 색상 전부에 패딩을 준 모습.
border로도 해결이 가능하다.
역시 모든 내부 요소에 다 보더를 줘야한다.
margin이 위아래로 겹칠 때 해결 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 100px; height: 50px;
border: 3px dotted gray;
}
.m1 { margin-bottom: 30px; }
.m2 { margin-bottom: 15px; }
.m3 { margin-top: 15px; }
</style>
</head>
<body>
<div class="box m1"></div>
<div class="box"></div>
<hr>
<!-- 마진 위아래가 겹침. margin-bottom, margin-top을 조정해야 함 -->
<div class="box m2"></div>
<div class="box m3"></div>
</body>
</html>
- 단순하게 margin-bottom이나 top 옵션을 줘서 떨어뜨리면 된다.
반응형