CSS 속성 - 외부 여백(margin)

margin(외부 여백)이란?

요소의 외부 여백을 지정하는 단축 속성

Untitled

이미지를 보면 좀 더 이해가 될 거 같아서 가져왔다

빨갛게 칠해져 있는 부분을 그냥 box라고 생각 했을 때

그 box 바깥 부분에 여백을 주는 것을 margin 이라고 한다

margin을 주는 방법은 여러가지가 있다

1, auto : 브라우저가 자동으로 여백을 계산해준다 → 그냥 가운데 정렬을 해준다고 생각하면 된다

2, px로 지정 : 좀이따 코드에서 보겠지만 px을 활용하여 여백을 줄 수도 있다

px을 활용한 margin

1, html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./margin.css" />
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>