css 공간의 이해 3 - margin collapsing

블록속성을 가진 요소를 자식으로 가지고 있는 부모요소는

margin이 생기지 않는다. 

예를 들면, h태그는 위아래 margin을 가지고 있는데,

부모요소인 container3에 배경색을 넣고 보면, 자식요소인 h1에 margin이 표현되지 않은걸 확인할 수 있다. 

이때, 부모에 overflow:hidden이나, 이 방법 외에도, display:flow-root를 적용하면, 

자식요소인 h1의 margin이 표현되는 걸 확인 할 수 있다. 

 

---

 

1. HTML 부분

  <div class="container3">
	<h1>box3</h1>
  </div>

 

---

 

2. CSS 부분

		.container3{
			background: #f00;
			/* overflow: hidden; */
			display:flow-root;
		}
		h1{
			background: #fee;
		}

 

---

 

이처럼, 자식요소의 공간에 float, margin 이 적용됨으로써, 공간이 원래 역할대로 표현되지 않을 때, BFC를 사용하여 해결한다. 

 

 

---

developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context

 

블록 서식 맥락 - 웹 개발자 안내서 | MDN