[html, css 응용] 6. 마진 상쇄

이번 강의에서는 마진 상쇄에 대해 알아보자!

 

개발자도구를 보면

 

il에 margin을 30px로 설정했는데 요소들끼리 서로 마진이 겹쳐 60px가 아닌 30px로 나타나고 있다. 이를 마진상쇄라고 하며 마진상쇄가 일어나는 조건을 아래에 정리해 보겠다.

 

마진 상쇄 특징

1. block element와 block element 사이에서만 발생된다.

2. 인접 요소의 수직 마진에 대해서만 발생된다.

3. 수평, inline to block, inline to inline에서는 발생하지 않는다.

4. 인접한 두 요소의 마진이 서로 다를 때 마진 상쇄가 발생된다면 항상 큰 쪽이 우세하다.

5. display에서 inline-block은 마진 상쇄가 일어나지 않는다.

 

 

예시

inline to block

 

1~5 모두 속성을 바꾸며 실습해보니 확인할 수 있었다.