● [CSS] - margin 값 특이점

• 분명 <div>에 margin, padding 0값을 주었는데도 마진이 생길때

margin, padding 모두 0으로 값을 준 <div>

이는 마지막 <p>태그의 마진값이 있기 때문에 부모의 요소바깥까지 영향을 미치게 된 것. 이럴때는 <p>태그의 마진값을 0주거나 아니면 부모요소에 패딩값을 주거나 마진값을 주면 자식요소의 값을 먹어버린다.

<p>태그의 margin을 0 준 모습

부모요소 <div>에 <p>태그의 margin보다 더 크게 margin을 준 모습

 

• 블록요소들의 margin은 가장 큰 값으로 margin이 적용된다.
  • 아래에 두개의 <div>가 있는데, 각각 margin을 24px로 주었다. 그렇다면 두 요소는 사이에 48px의 여백이 생겨야할 것 같은데 실제로 적용해보면 24px만큼만 떨어져있다. 이게 블록 요소들끼리 margin값을 상쇄해버리는 특징이 있다.

두 <div>에 24px만큼 margin값을 준 모습

위의 <div>에 4em, 아래 <div>에는 24px 의 margin 값을 준 모습

따라서 블록 요소에는 마진값이 더 큰 쪽으로 공백이 주어지게 된다. 위에 <div>에 24px보다큰  4em으로 margin값을 주었더니 두 사이의 공백이 4em으로 보이게 된다.