"CSS 마진 상쇄는 부모와 형제를 가리지 않는다."
CSS 마진 상쇄에 대해 공부하던 중,
부모와 형제 간 마진 상쇄는 어떻게 일어나는지
또한 예외 사항은 없는지, 궁금해서 혼자 이리저리 뚝딱거리다가
border 값이 들어갔을 때, 값의 변화를 발견하여 기록해 보기로 했다.
관점은 'div #a' 와 'div #b'의 세로 마진 간격을 비교해 보는 것.
예제1)
<body>
<style>
#a {
margin: 30px;
background-color: rgb(255, 112, 112);
/* border: 1px solid red; */
}
#b {
margin: 20px;
background-color: #6c6ceb;
}
#c {
margin: 100px;
background-color: rgb(83, 148, 83);
}
</style>
<div id="a">
a
<div id="c">
c
</div>
</div>
<div id="b">
b
</div>
</body>자식의 마진값이 부모보다 클 때
부모와 자식 마진 간 병합이 일어나며
마진값은 둘 중 더 큰 값으로 적용된다.
'div #a'와 'div #b'의 마진값은 결과적으로
'div #c'의 마진값인 100px이 된다.
예제2)
<body>
<style>
#a {
margin: 30px;
background-color: rgb(255, 112, 112);
border: 1px solid black;
}
#b {
margin: 20px;
background-color: #6c6ceb;
}
#c {
margin: 100px;
background-color: rgb(83, 148, 83);
}
</style>
<div id="a">
a
<div id="c">
c
</div>
</div>
<div id="b">
b
</div>
</body>'div #a'에 보더가 적용되었을 때,
'div #c'의 마진값은 부모 밖으로
넘쳐흐르지 않으며 div #a 안에서만 적용되게 된다.
즉 이때에는 부모 자식 간 마진상쇄가 일어 나지 않는다.
결과적으로 'div #a'와 'div #b'의 마진값은 서로 상쇄되며
'30px' vs '20px' 중 더 큰 값인 30px로 적용되게 된다.
CSS 마진 상쇄 曰: "보더값이 오면 무효입니다!"
HTML로 코딩합니다.
넘 어렵다 ㅜ.ㅜ