-
마진겹침 왜 생기는 걸까?프론트엔드/CSS 2022. 6. 29. 20:34
마진 겹침
1. 마진 겹침이란?
요소와 요소의 사이에 상하 margin의 공간이 있을 경우 더 높은 값이 적용되는 현상
2. 마진 겹침 현상의 조건
- 인접 형제 요소간의 마진은 겹침
- 부모 요소와 형제 요소가 block일 때 분리하는 콘텐츠가 없을 때
- height , min-height, max-height, border, padding, inline 콘텐츠가 없을 때
- 모두 block 이어야 함
인접 형제 요소간의 마진 겹침
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> h1 { border:1px solid red; margin: 100px; } </style> <body> <h1>Hellow world</h1> <h1>Hellow world</h1> </body> </html>위와 같이 h1에 모두 공통적으로 margin을 줘서 예상대로라면 두 요소 사이에는 위의 h1의 margin-bottom과 아래의 h1의 margin-top이 있어야 하지만 두개가 겹쳐있는 모습이 보인다.
첫번째 h1에 margin-bottom을 늘리자 두 요소 사이 margin이 커진다.
반대로 100px보다 작아지니 두번째 h2 요소의 margin이 적용되는 것을 볼 수 있다.
(더 큰 margin값을 채택하는 것을 알 수 있음.)3. 부모와 자식간의 마진 겹침 현상
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .parent{ /* border: 1px solid coral; */ margin-top: 100px; } .child{ background-color: yellowgreen; margin-top: 50px; } </style> <body> <div class="parent"> <div class="child"> 마진 상쇄 정복해보자! </div> </div> </body> </html>border를 주석처리하자 margin이 사라지는 것을 볼 수 있음.
- child에 margin-top을 값을 늘려주면 100px까지는 child 콘텐츠의 위치가 바뀌지 않지만 100px이 넘어가면 움직이기 시작함
- 또한 50px 이하로 줄여도 child 컨텐츠의 위치는 변하지 않는다.
결론 : parent에 시각적인 요소가 없을 때 parent의 margin값과 child의 margin 값 중에 큰 쪽의 margin 값이 child의 margin값으로 사용됨
4. 빈 요소의 상하 마진 겹침
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .empty { margin-top: 50px; margin-bottom: 100px; /* border: 1px solid salmon; */ } .normal{ background-color: burlywood; margin-top: 100px; } </style> <body> <div class="empty"></div> <div class="normal">채움</div> </body> </html>아까와 마찬가지로 border 값 (시각적 요소)를 없애자 margin 겹침 현상이 일어나는 것을 볼 수 있음.
위 아래 각각 margin 값을 증가시키자 위 아래 margin 중 더 큰 margin을 채택한다는 사실을 알 수 있음5. margin 겹침현상이 일어나지 않는 경우
- float: right/left;
- position: absolute;
- display: flex;
6. margin 겹침 해결 방법
- 부모 요소에 overflow: hidden; 속성 값을 적용
- 부모 요소에 display: inline-block 값을 적용
- 부모 요소에 border 값을 적용
'프론트엔드 > CSS' 카테고리의 다른 글
input checkbox 커스텀 (JS로 만들었던 것 CSS로 구현) (0) 2022.10.04 position: sticky; 🆚 position:fixed; (0) 2022.06.29