[TIL] 마진병합(margin-collapsing),margin : 0,main < div?

그냥 교안만 보고 따라치는 식의 글은 이제 자제 해야겠다!

타이핑 하면서 머릿 속에 넣는다는 마인드 였는데 그럼 시간을 효율적으로 사용하지 못하는 것 같다.

따라치기 보다는 오! 싶었던 내용이나, 유익하다 생각되는 다른 사람들의 질문 내용을 블로깅 하도록 노력해야겠어!

이 외에 들은 내용은 더 많습니다..ㅠㅠ 놓치지 말고 들어야지..

제가 쓴 글이 틀릴 수도 있습니다!

여기서 풀떼기 부분은 백그라운드 이미지로 빼주는게 좋다!
이 웹의 주제는 Fox. 여우를 설명하고 싶지, 데코레이션 요소인 풀떼기는 백그라운드 이미지로 빼주는게 여우를 더 강조할 수 있고, 유지보수 적인 측면에서도 낫다고 하셨다.

마진병합(margin-collapsing)

우선 마진이란 박스 모델에서의 가장 바깥쪽 여백 영역이다.
block 요소들의 위/아래(좌우는X) margin이 경우에 따라 가장 큰 크기를 가진 margin으로 결합되는 현상이다.
원인으로는 그냥 브라우저에서 그렇게 지정했기 때문 ㅎㅎ..

원인

• 형제 블록 요소의 위/아래 여백이 만나 상쇄

• 부모 블록에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우

• 부모 블록에 border, padding, inline content가 없고, 부모와 자식을 분리할 height 값이 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우

• 빈블록, border, padding, content가 없고, height 또한 존재하지 않으면 해당 블록의 margin-top과 margin-bottom이 만나는 경우

마진병합을 원하지 않을 경우 해결 방법

• display flow-roof (IE에선 지원하지 않는다)

• display inline-block (별로 좋은 방법은 아니다)

• 부모 박스 상단(하단)에 padding 또는 border 값을 주어 벽을 만들어주는 것이 안전함.

마진을 내가 정해주지 않아도 브라우저에서 설정한 값이 이미 있다. 마진 상쇄를 원하지 않으면 CSS 처음에 reset을 해주고 가면 편하다.

예시)
h1, p {
margin : 0;
}

마진을 따로 설정해주지 않고
p를 두개를 쓰면 문단 사이에 공간이 생긴다.
margin : 0을 해버리자!

h1과 p를 감싸는 태그를 main보다 div로 하는게 좋다.
main은 확장성이 좋지 않다고 한다!