코딩하는 바나나
[CSS] margin collapse 본문
부스트코스의 풀스택 강의 수강중 첫번째 프로젝트를 하다 이상한 점을 발견했다.
article태그 안에 있는 h1태그에 margin-top을 줘서 h1태그가 약간 상단으로부터 띄어져서 나오게 하고싶었다.
그런데 아무리 margin-top값을 주어도 h1태그의 바로 부모 태그인 article에게 margin-top 값이 부여가 되는 것이었다.
- margin 주기전
-margin 주고 난 후
두번째 하얀색 박스가 article 태그이고
'웹 백엔드 개발자~!유바칩' 부분이 h1태그이다.
하얀 박스가 내려 간것으로 보아 article 태그가 밀려났다.
원래대로라면 h1이 밑으로만 이동해야한다.
고쳐 보려고 article 태그에 border값을 넣어보니..
내가 원하느 데로 작동한다....
장시간 고민 끝에 stack overflow에 검색해보니 margin collapsing 때문이라고 한다.
Margin Collapsing 이란
두개 이상의 block 요소의 상하 마진이 겹칠때 더 큰 마진으로 합쳐지는 것이다.
margin collapsing이 일어나는 경우는 총 3가지 이다.
1. 인접 형제 박스간 상하 마진이 켭칠때
- 마진이 하나만 적용된다. 더 큰 것으로
2. 빈 요소의 상하 마진이 겹칠때
- 빈 요소는 높이 값이 0인 요소 혹은 내부에 인라인 컨텐츠가 없는 요소
3. 부모 박스와 자식 박스의 상하단 마진이 겹칠때
- 부모 박스와 자식박스 사이에 인라인이 없거나 border, padding 값이 없을때 겹쳐진다. -> 내가 빨간색 border를 article에 줬을 때 정상적으로 동작한 이유
- 마진이 하나만 적용된다. 더 큰 것으로 이때 마진값은 부모가 가져간다. 자식은 마진값이 없게 된다. -> 나의 문제점
3번의 경우를 코드로 표현하면 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
</header>
<article>
<h1>hello</h1>
</article>
</body>
</html>body{
}
header {
height: 50px;
border: 1px solid gray;
}
h1 {
border: 1px solid blue;
margin: 50px;
}
article {
height: 60%;
text-align: center;
background: gray;
}
article태그가 회색으로 칠한부분, 파란테두리가 h1태그인데 css파일에서 article의 마진은 없고 h1태그에 마진을 50px 주었지만 h1은 마진이 생기지않고 article의 마진이 50px이 되었다.
결론: article에 padding 혹은 border를 주자.
참고 사이트
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
- https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4
Mastering margin collapsing - CSS: Cascading Style Sheets | MDN
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of float
developer.mozilla.org
CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해
마진 상쇄는 흔히 '마진 겹침 현상'이라고도 불립니다. (혹자는 '마진 빡침 현상'이라고도 합니다) 하지만 인과관계로 볼 때, 마진이 겹치게 되면 상쇄가 일어나기 때문에 영미권에서는 '마진 상
velog.io