HTML/CSS - margin 중복

안녕하세요, 오늘은 margin 중복에 대해 정리해보겠습니다.

 

margin은 CSS 속성으로 많이 쓰는데요, margin 속성끼리 중복되었을 때 어떻게 행동하는지 정리해두려 합니다.

 

◆ margin 중복이 발생하는 상황

1. 형제 요소끼리 margin-top과 margin-bottom이 만났을 경우

2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 경우

3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 경우

 

조금이라도 쉽게 이해하기 위해 예를 보며 정리해보겠습니다.

형제 요소(child)끼리의 좌우로 margin이 중첩이되면 위 그림과 같이 형제들 사이는 40px(20+20px)의 거리가 되는것을 확인할 수 있습니다. (여기서 div 태그는 block 요소이므로 가로로 정렬하기 위해 inline-block 값으로 바꿨습니다!)

세로로 중첩이 되면 어떻게 될까요?

세로로 중첩이 되면 20px만큼만 띄어져 있습니다! 만약 서로 마진이 달라지면 어떻게 될까요?

(비교하기 쉽게하기위해 2개 모두 왼쪽으로 마진을 30px만큼 주었습니다.)

옆으로 만났다면 40px만큼 떨어져 있었을 것입니다!

하지만 [1. 형제 요소끼리 margin-top과 margin-bottom이 만났을 경우]에 의해 위아래로 만난 경우 중첩이 일어나게 됩니다! 중첩을 계산하는 방법은 +의 값을 가진 마진끼리 중첩이 일어나면 큰 값의 마진을 따라갑니다!

 

이제 2번과 3번의 경우를 살펴보겠습니다. 부모 클래스와 자식 클래스를 만들어 하나씩만 margin-top을 적용시켜보겠습니다.

부모/자식 둘다 마진 없을 때

부모에만 마진을 주었을 때

자식에만 마진을 주었을 때

부모와 자식 둘다 마진을 주었을 때

자식에 더 큰 마진을 준 경우

위에 코드에 따른 결과에서 확인이 되듯 

2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 경우

3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 경우

부모와 자식이 위/아래 중 끝이 만난 상태에서 한쪽에만 또는 둘다 margin을 적용할 경우 같은 결과를 나타내는것을 확인할 수 있었습니다. 또한 "+의 값을 가진 마진끼리 중첩이 일어나면 큰 값의 마진을 따라간다"는 동일하게 적용이 되었습니다!

 

그럼 "-"의 값을 가진 마진끼리의 중첩은 어떻게 일어날까요?

-의 값을 가진 마진끼리 중첩이 일어나면 작은 값의 마진을 따라갑니다! 위의 예에서 -40px 올라가서 child1이 40px이나 화면 위로 올라가서 10px만 남은 것을 확인할 수 있습니다!

 

오랜만에 어려운걸 정리했는데 나중에 제가 이 글을 보고 이해를 할 수 있으면 좋겠습니다 ㅎㅎ