형제간 margin병합 현상
형제간 margin충돌이 일어날 때, 각각의 margin값들이 반영되는게 아니라 더 큰 margin으로 병합되는 현상.
음 말로 적으니까 뭔 말인지 어렵다..
<div id="box1"></div>
<div id="box2"></div> #box1 {
width: 100%;
height: 200px;
background-color: yellow;
margin-bottom: 100px;
}
#box2 {
width: 100%;
height: 200px;
background-color: pink;
margin-top: 50px;
}
요로코롬 HTML, CSS가 작성돼있다고 하자. box1, box2는 형제 관계고 box는 밑 쪽으로 100px만큼의 margin을, box2는 위쪽으로 50px만큼의 margin을 가지고 싶어 한다. 상식적으론 둘의 의견을 반영해 150px의 margin이 생기는게 맞다고 생각되지만,
실제론 이렇게 100만큼의 margin만 가지게 된다. 이게 형제간 margin 병합 현상. 충돌이 일어날 때 더 큰 margin값이 채택된다는 얘기다.
부모 자식간 margin병합 현상
자식만 margin을 두고 싶지만 부모도 함께 margin이 적용되는 현상을 말한다.
<div id="div">
<article></article>
</div> #div {
width: 100%;
height: 400px;
background-color: yellow;
}
article {
width: 100px;
height: 100px;
background-color: red;
}
요로코롬 HTML, CSS가 작성돼있다고 하자. 현재 화면은 다음과 같다.
여기서 노란색은 놔두고 빨간색 박스만 밑으로 50px만큼 움직이고 싶어서 빨간색 박스(article태그)에 margin-top을 다음과 같이 먹였다고 하자.
#div {
width: 100%;
height: 400px;
background-color: yellow;
}
article {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
하지만 결과는,
이렇게 부모도 같이 움직이게 된다. 이를 부모 자식간 margin병합 현상이라 한다. 자식에 쓰인 margin이 부모에게도 적용되는 것!
참고로 이건 자식에게 position값으로 absolute를 멕이는 것으로 해결 가능하다. absolute가 부모를 기준으로 적용되는 position값이기 때문!
'WEB > HTML&CSS' 카테고리의 다른 글
| [CSS] root 가상클래스를 통한 변수활용법 (0) | 2022.06.20 |
|---|---|
| [CSS] 선을 만들 땐 border보단 box-shadow가 낫다? (0) | 2022.03.26 |
