반응형
20.마진 겹침 현상
마진겹침(margin-collapsing) 현상은 상하마진값이 어떤 상황에서 사라지는 현상을 의미합
니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다.
하지만 이것을 이해하지 못하면 실무를 할 때 이해 할 수 없는 CSS의 동작으로 인해서 깊은
화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다.
1) 마진 겹침 현상 1번째
다음과 같이 소스를 작성한 뒤 실행해보고 크롬 개발자 도구를 이용해서 margin 값을 살펴봅시다.
margin-collapsing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1
border:1px solid red;
margin:100px;
</style>
</head>
<body>
<h1>hello world</h1>
<h1>hello world</h1>
</body>
</html>
실행화면
아래와 같이 실행 되었습니다.
하지만 자세히 살펴보면 아래와 같이 margin이 겹친 것을 알 수 있습니다.
위, 아래 엘리먼트들의 마진이 겹칠 시 둘 중 마진이 큰 쪽이 둘 사이의 마진이 됩니다.
2) 마진 겹침 현상 2번째
margin-collapsing2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#parent
/* border:1px solid tomato;*/
margin-top:100px;
#child
background-color: powderblue;
margin-top:50px;
</style>
</head>
<body>
<div id="parent">
<div id="child">hello world</div>
</div>
</body>
</html>
실행화면
아래와 같이 실행되는데 만약 위의 주석 부분을 지운다면?
hello world의 위치가 바뀐 것을 볼 수 있습니다.
border를 지운 후 크롬 개발자 도구에서 margin-top값을 바꿔보면 100px까지는 안 움직이다가 100px이 넘는 순간 hello world의 위치가 바뀜을 알 수 있습니다.
즉 부모, 자식 엘리먼트 사이에서 부모의 시각적 요소가 없어지면 부모, 자식 마진 중에 큰
쪽이 자식의마진처럼 사용됩니다.
3) 마진겹침현상 3번째
margin-collapsing3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#empty
margin-top:50px;
margin-bottom:100px;
border:1px solid tomato;
#normal
background-color:powderblue;
margin-top: 100px;
</style>
</head>
<body>
<div id="empty">
</div>
<div id="normal">
normal
</div>
</body>
</html>
실행화면
위의 소스를 실행하면 다음과 같이 됩니다.
여기서 id가 empty인 div의 border를 주석 처리하고 다시 실행해보면 아래와 같이 normal
의 값이 위치가 바뀝니다.
크롬 개발자 도구를 이용해서 아이디가 empty인 마진의 값을 바꿔보면 margin-top의 값이
100px이 넘어야 변화가 생깁니다.
즉, empty의 시각적인 요소들이 없어지면 margin-top과 margin-bottom중 큰 값이 empty
의 마진 값이된다는 의미입니다.
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 21. Float (0) | 2017.12.18 |
|---|---|
| 생활코딩 css 정리 - 20. media query (0) | 2017.12.10 |
| 생활코딩 css 정리 - 19. flex (0) | 2017.12.02 |
| 생활코딩 css 정리 - 18．포지션(Position) (0) | 2017.12.01 |
| 생활코딩 css 정리 - 19. box-sizing (0) | 2017.11.19 |
| 생활코딩 css 정리 - 18. 박스 모델 (0) | 2017.11.15 |
| 생활코딩 css 정리 - 14. 레이아웃 인라인 vs 블럭레벨 (0) | 2017.10.15 |
| 생활코딩 css 정리 - 13. bracket 도구사용법 (0) | 2017.10.14 |