[css] 내부 여백과 외부 여백 구분하기

26 Dec 2023

웹 디자인에서 여백(margin)과 패딩(padding)은 레이아웃을 설정하고 요소들 간의 간격을 제어하는 데 중요한 역할을 합니다. 이 글에서는 CSS에서 내부 여백(padding)과 외부 여백(margin)을 구분하는 방법에 대해 알아보겠습니다.

패딩(padding)과 여백(margin) 개념

패딩(padding)

패딩은 요소 내의 내부 여백을 설정하는 속성입니다. 즉, 요소의 테두리와 내용 사이의 여백을 조절합니다. padding-top, padding-right, padding-bottom, padding-left와 같은 속성을 사용하여 각 방향의 패딩을 설정할 수 있습니다.

예시:

.box {
  padding: 20px;
}

이렇게 하면 상하좌우로 20px의 패딩이 적용됩니다.

여백(margin)

여백은 요소 주변의 외부 여백을 설정하는 속성입니다. 즉, 다른 요소와의 간격을 조절합니다. 마찬가지로 margin-top, margin-right, margin-bottom, margin-left와 같은 속성을 사용하여 각 방향의 여백을 설정할 수 있습니다.

예시:

.box {
  margin: 20px;
}

이렇게 하면 상하좌우로 20px의 여백이 적용됩니다.

내부 여백과 외부 여백의 시각적 표현

내부 여백은 요소의 내부에 적용되어 내용과 테두리 사이의 여백을 만들고, 외부 여백은 요소 주변에 적용되어 다른 요소와의 간격을 조절합니다.

아래는 간단한 예시를 통해 각각의 영향을 시각적으로 보여주는 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #f2f2f2;
      padding: 20px;
      margin: 20px;
    }

    .content {
      width: 100px;
      height: 100px;
      background-color: #666;
    }
  </style>
</head>
<body>

<div class="box">
  <div class="content"></div>
</div>

</body>
</html>

결론

CSS에서는 패딩과 여백을 사용하여 웹 요소들의 간격을 조절할 수 있습니다. 내부 여백과 외부 여백을 올바르게 활용하여 웹 디자인을 보다 효과적으로 구현할 수 있습니다.

내부와 외부 여백은 디자인을 결정짓는 중요한 요소이므로, 올바르게 활용하는 것이 웹 디자인의 완성도를 높이는 데 도움이 될 것입니다.

참고자료: MDN Web Docs