margin과 padding의 비교
| + | - | auto | 단위 | |
| margin | o | o | o | px, % ... |
| padding | o | x | x |
px, % ... |
- 음수값 사용 가능 여부! 왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까요? 예를 들어 생각해보자면, padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격이라고 생각하면 쉽습니다. 지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 된다고 생각하면 됩니다. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 음수 값이 가능하다고 생각하면 됩니다.
- %값의 사용과 기준점 css 속성을 사용하면서 어떤 값을 적용할 때 이 단위를 적용 할 수 있을까? 라는 생각을 가지고 코딩하는 자세는 매우 중요합니다. margin과 padding은 px과 같은 고정적인 단위 외에도 %라는 상대적인 단위를 사용 할 수 있습니다. %는 요소의 크기를 기준으로 상대적인 값을 결정짓게 됩니다. 얼핏 생각하면, 상하는 height 값에 대해 좌우는 width 값에 대해 크기가 계산될 거 같지만 그렇지 않습니다. %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정 됩니다.
div {
width: 100px;
height: 200px;
margin: 10%;
padding: 10%;
}
만약 위와 같은 코드의 경우에는 margin과 padding이 모두 20px 10px 20px 10px으로 적용되는 것이 아니라, 10px 10px 10px 10px 값으로 적용됩니다.
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>margin & padding</title>
<style>
div {
width: 300px;
height: 100px;
margin: -10px -10px 20px 30px;
padding: 10px 20px 30px 40px; /* padding 음수 사용 불가 */
}
</style>
</head>
<body>
<div> css margin & padding 비교 실습 </div>
</body>
</html>
'코딩 공부' 카테고리의 다른 글
| 비전공자를 위한 HTML/CSS-height (0) | 2022.05.04 |
|---|---|
| 비전공자를 위한 HTML/CSS-width (0) | 2022.05.04 |
| 비전공자를 위한 HTML/CSS-margin (0) | 2022.05.04 |
| 비전공자를 위한 HTML/CSS-padding (0) | 2022.05.04 |
| 비전공자를 위한 HTML/CSS-border (0) | 2022.05.04 |