[css] padding 속성

26 Dec 2023

CSS에서 ‘padding’ 속성은 요소의 내부 여백을 지정하는 데 사용됩니다. 이 속성을 사용하여 요소의 내용과 테두리 사이의 여백을 설정할 수 있습니다. ‘padding’ 속성은 상하좌우 여백을 모두 같은 크기로 지정하거나 각 방향별로 다른 크기를 지정할 수 있습니다.

사용 방법

‘padding’ 속성은 다음과 같이 사용합니다:

.element {
  padding: 10px; /* 모든 방향의 여백을 10px로 설정 */
}

/* 혹은 */

.element {
  padding: 10px 15px; /* 상하 여백은 10px, 좌우 여백은 15px로 설정 */
}

/* 혹은 */

.element {
  padding: 10px 15px 20px 25px; /* 상, 우, 하, 좌 순으로 여백 설정 */
}

위 예제에서 ‘padding’ 값은 픽셀(px)을 사용하여 지정되었지만, 다른 단위인 em, rem, % 등도 사용할 수 있습니다.

예시

아래의 예시를 통해 ‘padding’ 속성의 활용법을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: #f2f2f2;
      padding: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="box">
    내용
  </div>
</body>
</html>

위 예제에서는 ‘padding’ 속성을 사용하여 상자의 내부 여백을 설정하고, 테두리와 내용 사이의 간격을 조절했습니다.

‘padding’ 속성을 통해 요소의 내부 여백을 지정하여 디자인을 더욱 다채롭게 표현할 수 있습니다.

참고 자료

MDN Web Docs - padding