인접한 요소간 마진의 방향이 겹치면 작은 값은 무시해버리는 현상.
1. 두 elements의 margin 영역이 겹칠 때
<style>
#element1{
margin: 50px;
}
#element2{
margin: 100px;
}
</style>
<body>
<div id="element1">Hello</div>
<div id="element2">World</div>
</body>경계가 border 효과(눈에 보이는 시각적인 효과)가 없을 때,
element1의 margin-bottom 영역과 element2의 margin-top 영역이 겹칠 때, 겹치는 부분만 더 큰 margin값으로 설정된다.
즉, element1의 margin-bottom은 무시되고 element2의 margin-top만 100px로 설정된다.
2. 부모 자식 간의 elements의 margin영역이 겹칠 때
<html>
<head>
<style>
#parent{
/* border:1px solid tomato;*/
margin-top:100px;
}
#child{
background-color: powderblue;
margin-top:50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
Hello world
</div>
</div>
</body>
</html>parent의 경계가 border 효과(눈에 보이는 시각적인 효과)로 명확할 때는 margin 겹침 현상이 나타나지 않지만, border효과가 없을 때는 parent의 margin-top과 child의 margin-top이 겹치게 되어 child의 margin-top은 존재하긴 하지만 설정상 적용되지 않고 parent의 margin-top만 적용된다.
해결방법
경계가 명확하게 해주던가(background-color는 해결 안해줌),
display : inline-block 속성을 준다.
'개발 관련 지식 > CSS' 카테고리의 다른 글
| CSS - flex (0) | 2020.03.12 |
|---|---|
| CSS - position : static, relative, absolute, fixed (0) | 2020.03.12 |
| CSS - box-sizing (0) | 2020.03.11 |
| CSS - block vs inline (0) | 2020.03.11 |
| CSS - 가상 클래스 선택자 (0) | 2020.03.11 |
