박스(block)에는 3가지 요소가 있다.
1.margin(여백): 박스의 경계 바깥에 위치하는 공간
2.padding: 박스의 경계 안쪽에 위치하는 공간
3.border(경계):
<margin>
margin:5px -> 상하좌우 전부 5px만큼의 공간을 준다는 의미.
margin:5px 3px -> 상하: 5px , 좌우: 3px만큼의 공간을 준다는 의미.
margin:5px 4px 3px 2px -> 상:5px, 우:4px, 하:3px, 좌:2px만큼의 공간을 준다는 의미.(시계방향)
margin-top:5px, margin-left:5px, margin-right:5px, margin-bottom:5px 각각 부여해 줄수 있음.
다음 코드를 보자.
<!DOCTYPE html>
<html>
<head>
<style>
html{
background-color: coral;
}
body{
background-color: plum;
}
div{
background-color: white;
margin:15px;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
분명 margin 값에 상하좌우 15px씩 주었지만 적용이 안되는 모습을 볼수 있다.
이 현상을 collepsing margins 이라고 하는데 흰 박스의 경계가 핑크 박스의 경계와 같을 때 발생하게 된다.
그리고 이때 두 박스의 경계는 하나가 된다. (또한 이 현상은 위 아래로 겹칠때만 발생한다.)
<padding>
선택한 박스의 내부에 공간을 준다.
위의 문제를 해결하기 위해선 body 파트에 padding을 적용해 줌으로써 해결할 수 있다.
<border>
'웹 프로그래밍 > css' 카테고리의 다른 글
| selector, state (0) | 2023.09.02 |
|---|---|
| position: relative, absolute, fixed, static (0) | 2023.08.27 |
| 박스 display: (block , inline, inline-block) (0) | 2023.01.05 |
| css 작성법 ( id, class ) (0) | 2023.01.05 |
| html + css (css 를 html에 추가하는 방법) (0) | 2023.01.05 |
