반응형
<!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>
<!--
css에서 빡치는 부분 중 하나인 마진 겹침 현상이다.
이해 안 가는 현상 중 하나이다.
--><!doctype html>
<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><!doctype html>
<html>
<head>
<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>
</html>반응형
'WEB > CSS' 카테고리의 다른 글
| flex (0) | 2024.02.19 |
|---|---|
| 포지션 (0) | 2024.02.19 |
| box-sizing (0) | 2024.02.19 |
| 인라인 vs 블럭레밸 (0) | 2024.02.19 |
| 캐스케이딩 (0) | 2024.02.19 |