1. 같은 level의 element인 경우
- margin이 곂쳐진 부분은 더 값이 큰 마진값이 적용 된다.
- top과 bottom을 가진 element가
시각적으로 표현이 될 때는 top+bottom 크기로 표시가 되는데,
시각적으로 표현이 안 된다면 top과 bottom중 큰 값만 적용 된다.
(ex)
<style>
#empty {
margin-top: 50px;
margin-bottom: 100px;
/*border: 1px solid tomato;*/
}
#normal {
background-color: powderblue;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="empty"></div>
<div id="normal">normal</div>
</body>
2. 부모와 자식의 관계로 있고
- 부모 element가 시각적으로 투명한 경우(border 따위 속성이 없으면),
부모 margin과 자식 margin 중 큰 쪽의 margin만 적용 된다.
(ex)
<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>
댓글 없음:
댓글 쓰기