마진겹침 현상1
<!DOCTYPE html>
<html>
<head>
<style>
h1{
border:1px solid red;
margin:100px;
}
</style>
</head>
<body>
<h1>Hello world</h1>
<h1>Hello world</h1>
</body>
</html>
마친겹침현상2
주석은 컨트롤+슬래쉬
부모 엘리먼트가 투명한 상태일 때 부모 엘리먼트와 자식 엘리먼트 중 큰 값이 자식 엘리먼트의 마진값으로 사용된다
<!DOCTYPE html>
<html>
<head>
<style>
#parent{
/* border:1px solid tomato */
margin-top:100px;
}
#child{
background-color:powder-blue;
margin-top:50px
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
Hello world
</div>
</div>
</body>
</html>
마진겹침현상3
border를 없애면 늘어난다
시각적인 요소가 없다면 아랫쪽의 마진값과 윗쪽의 마진값 중 더 큰 것이 마진값이 된다
<!DOCTYPE html>
<html>
<head>
<style>
#empty{
margin-top:50px;
margin-bottom:100px;
border:1px solid tomato;
}
normal{
background-color:powederblue;
margin-top:100px;
}
</style>
</head>
<body>
<div id="empty"></div>
<div id="normal"></div>
</body>
</html>
'웹(Web) > CSS' 카테고리의 다른 글
| Flex (0) | 2021.04.15 |
|---|---|
| 포지션 (0) | 2021.04.15 |
| Box-sizing (0) | 2021.04.15 |
| 박스모델 (0) | 2021.04.15 |
| 인라인레벨vs블럭레벨 (0) | 2021.04.15 |
댓글