CSS Margin과 Padding

CSS는 웹 페이지를 디자인하기 위한 필수 도구 중 하나입니다. 여러 속성들 중에서 margin과 padding은 가장 많이 사용되는 속성 중 하나입니다. 이 두 속성은 시각적으로 요소를 조정할 수 있지만, 서로 다른 기능을 가지고 있습니다. 이번 글에서는 CSS margin과 padding의 차이점을 자세히 알아보도록 하겠습니다.

1. Margin과 Padding이란?

- Margin: 요소의 테두리와 다른 요소 사이의 간격

- Padding: 요소의 컨텐츠와 테두리 사이의 간격

2. Margin과 Padding의 차이점

- Margin: 테두리를 기준으로 요소와 요소 사이의 간격을 조절합니다. 다른 요소에 대한 영향을 줍니다.

- Padding: 테두리와 컨텐츠 사이의 간격을 조절합니다. 요소 자체의 크기에 영향을 주며, 다른 요소들과의 간격에는 영향을 주지 않습니다.

3. Margin과 Padding 예제

- 예제를 통해 Margin과 Padding의 차이점을 더욱 명확히 이해해보도록 합니다.

<div class="box">
  <p>Margin과 Padding 차이</p>
</div>

- CSS 스타일

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 50px;
  padding: 20px;
}

위 예제에서는 200x200 크기의 상자를 만들고, 테두리 설정, margin과 padding 값을 다르게 설정하여 결과를 비교해볼 수 있습니다.

위에 보시는 것처럼 주황색 영역이 Margin, 초록색 영역이 Padding입니다. Margin으로 인해 box div가 컨텐츠 영역에서 50px 만큼 떨어져있고, Padding으로 인해 box div 안에 글자가 20px만큰 테두리에서 떨어져있는 것을 볼 수 있습니다.

test.html

0.00MB

위에 소스를 어느 태그에 넣어서 봐야하는지 모르시는 분들은 위에 파일을 다운받아서 실행해보시고 개발자도구 f12 버튼을 누르셔서 Margin과 Padding을 확인해보시기 바랍니다.

Margin과 Padding은 웹 페이지 디자인에서 가장 기본이 되는 속성 중 하나입니다. 둘 다 시각적인 요소에 영향을 주지만 서로 다른 기능을 가지고 있으며, 적절하게 사용하여 원하는 디자인을 구현할 수 있습니다. 이번 글이 여러분들에게 CSS margin과 padding에 대한 이해에 도움이 됐으면 좋겠습니다.