[CSS ] 마진 겹침 현상 | inline | block

🚀  inline  vs  block

 

inline	block
컨텐츠 부분만큼만 영역을 차지한다.	한줄을 모두 차지한다.
높이와 너비가 조절이 불가능하다. (css로 적용안됨)	높이,너비 모두 조정 가능하다.
padding , border 속성 사용 o /  margin 좌우만 가능하다.	padding , border , margin 모두 사용가능하며 해당 속성들이 다른요소를 밀어낸다.

 

 

 

Q. 만약 inline요소처럼 가로로 배치되면서 높이와 너비를 설정해주고 싶다면?

A.     inline-block   사용하자!

 

 

---

🚀 마진 겹침 현상 (margin collapsing)

 

1. 요소와 요소 사이에 margin-top OR margin-bottom의 공간이 있을경우 더 높은 값의 마진이 적용

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

- 다음 코드를 보면 첫번째 div에 margin-bottom : 30px , 두번째 div에 margin-top : 60px; 이므로

그럼 총 30px + 60px = 90px 만큼의 margin이 생기는거 아닌가? 라고 할 수 있지만 

마진 겹침 현상에 의해 60px 만큼 떨어지게 된다. 

 

즉, 30 <60  이므로 더 높은값인 60px만 적용된것이다!

 

2. 부모요소와 자식요소가 존재할때 , 자식요소의 margin-top OR margin-bottom 값이

부모의 높이에 영향을 미치지 않는 현상

 

 

 

 

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

 

- 하늘색이 부모 div , 핑크색이 자식 div이다.

- child에 margin : 50px을 주었다 . 이경우 예상하는 결과는 하늘색 div와 핑크색 div가 상하좌우로 50px 씩 떨어지는 것을 예상할 수 있다 .

 

- 하지만 결과는 ?? 왼쪽 마진은 적용이 되었으나 위아래는 부모와 그대로 붙어있다. 

즉, 마진겹침현상에 의해 .child요소의 마진값이 부모영역을 넘어서는것이다.

 

 

 

3. 해결방법

 

 - 부모요소에 overflow : hidden; 속성 지정

 - 부모요소에 display : inline-block 적용

 - 부모요소에 border값 적용

 

 

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

 

.

.

. 

[참고]

IE를 지킨다면 overflow: hidden;

IE를 버린다면 display: flow-root

그러나 overflow : hidden ; 이 안된다면 (자식의 디자인이 넘칠 경우) - 중간에 table요소넣기 

.parent::before,
.parent::after {
    content: ' ';
    display: table;
}