margin은 겹침현상이 생긴다.
margin이 적용된 부분이 겹치게 되면 두번 모두 적용되는 게 아니라 한번만 적용된다.
1. HTML 부분
<div class="container2">
<div class="box2">box2</div>
<div class="box2">box2</div>
</div>
2. CSS 부분
.container2{
background: #8887a1;
width:300px;
overflow: hidden;
}
.box2{
width:200px;
height:200px;
background: #f80;
margin:20px;
}
이미지 첨부 예정~!
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
css 위치와 공간 해석 - float (0) | 2021.02.09 |
---|---|
css 공간의 이해 3 - margin collapsing (0) | 2021.02.09 |
css 공간의 이해 1 - BFC (0) | 2021.02.08 |
coding tip - 2. about margin & overflow(BFC) (0) | 2021.02.04 |
coding tip - 1. about vertical-align (0) | 2021.02.04 |