1. margin 병합 현상(margin collapsing)이란?
See the Pen margin by Hun-Se (@hun-se) on CodePen.
다음 보기와 같이 겹치는 2개의 section값에 margin을 주었을 때 섹션 1의 하단에 20px, 섹션 2의 상단에 20px이 적용돼서 40px의 여백이 생기는 게 이론 상으로 맞다.
하지만 위 예시에서는 20px로 적용이 되었다. 이는 css에서 이를 병합해줘 보기가 좋게 만들어 줌으로써 사용자가 따로 css조작을 할 필요없게 만들어 준 것이다. (참고로 곂치는 block요소에서 더 큰 margin 값이 적용된다.)
- margin병합 현상의 조건
1) 인접해 있는 block요소 끼리만 일어난다.
2) 상하단에서만 마진 병합이 이루어진다.
문제점 예시)
See the Pen Untitled by Hun-Se (@hun-se) on CodePen.
위의 예시는 부모요소의 margin값의 0이 상하단으로 적용돼서 원하던 모양이 나오지 않는 현상이 발생한다.
- 문제 해결 방법
1) 겹치는 마진 사이에 공간을 차지하는 요소들을 삽입 해준다.
- table태그를 넣어준다.
- border값을 적용해준다.
- padding을 넣어준다.
- 글자를 삽입한다.
2) display: inline-block;을 적용해 준다.
- 마진 병합현상은 block 요소에만 적용되기 때문이다.
3) 부모 요소에 overflow: hidden;을 적용해준다.
- overflow:hidden을 사용하면 새롭게 block format context가 만들어지면서 병합되었던 마진 값을 출력해 준다. overflow를 사용한 요소는 내부에 마진을 포함하는 새로운 독립적인 요소가 되기 때문에 마진 병합을 해결할 수 있다.
코드 예시)
<!DOCTYPE html>
<html lang="ko">
<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>test</title>
<style>
.parent {
width: 100px;
margin: 10px;
background-color: pink;
}
.child {
width: 50px;
height: 60px;
background-color: green;
color: white;
font-size: 30px;
text-align: center;
margin: 20px
}
.padding_box {
padding: 1px;
}
.inline_block_box {
display: inline-block;
}
.overflow_box {
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent padding_box">
<div class="child">1</div>
<div class="child">2</div>
</div>
<div class="parent inline_block_box">
<div class="child">3</div>
<div class="child">4</div>
</div>
<div class="parent overflow_box">
<div class="child">5</div>
<div class="child">6</div>
</div>
</body>
</html>
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [CSS] overflow:hidden 과 display:none 차이점 (0) | 2022.04.07 |
|---|---|
| [CSS] 인라인 요소와 블록라인 요소 개념과 display 프로퍼티 (0) | 2022.04.06 |
| [CSS] CSS 개념 정리 (0) | 2022.04.06 |
| [HTML] Form 태그 종류 및 개념정리 (0) | 2022.04.05 |
| [HTML] Text-level Tag 모음 (0) | 2022.03.31 |