웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

CSS Property padding

Last Modified : 2018-07-25 / Created : 2018-07-10
2,467
View Count
엘리먼트 내부에 공간(간격)을 만들기 위해서 CSS의 padding 프로퍼티를 사용할 수 있습니다. padding은 설정된 값만큼 빈 공간을 만들어줍니다.

padding: 100px;


이때 값으로는 px, pt, em, %등 여러 값을 사용할 수 있습니다. 아래는 padding을 사용하는 자세한 방법입니다.




# padding 프로퍼티 사용방법

padding에 값을 설정할 경우 하나의 값을 설정하거나 상하좌우 다른 값을 설정할 수 있습니다. 아래는 Top, bottom, left, right 각각 20px의 값을 주는 경우입니다.

@ Top, right, bottom, left 각각 20px 내부 공간
padding: 20px;

padding: 20px 20px 20px 20px;

위 두 값은 모두 동일하게 적용되어 20px 만큼 상하좌우 공간이 생기게 됩니다. 물론 각각 다른 값을 설정할 수도 있겠죠.

@ Top, right, bottom, left 각각 50px, 10px, 0, 20px 내부 공간
padding: 50px 10px 0 20px;



! padding 축약 프로퍼티 사용하기

margin처럼 padding 역시 상하좌우 중 하나만 선택하여 프로퍼티를 설정하는 축약 프로퍼티가 존재합니다. 아래를 봐주세요.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

위 프로퍼티를 사용하면 각각 하나의 방향으로만 설정하는 것이 가능하죠. 만약 아래에만 30px 만큼 공간을 주고 싶다면?
div { padding-bottom: 30px; }



# padding 프로퍼티 예제보기

아래는 padding 프로퍼티를 적용한 다양한 예제소스입니다. 어떻게 사용할 수 있는지 알아보세요.
<div class="test1 blocked">TEST 1</div>
<div class="test2 blocked">TEST 2</div>
<div class="test3 blocked">TEST 3</div>
<div class="test4 blocked">TEST 4</div>
<div class="test5 blocked">TEST 5</div>

위 요소에 각각의 다른 padding을 준 css를 적용해보겠습니다.
.test1 { padding: 50px; }
.test2 { padding: 10px 30px; }
.test3 { padding: 0 0 0 50px; }
.test4 { padding: 10px 0 20px; }
.test5 { padding: 0 0 10px 20px; }

테스트를 위해서 테두리와 배경값을 설정했습니다.
.blocked {
  display: inline-block;
  border: 1px solid blue;
  background: #eee;
  text-align: center;
  margin: 10px;
}

위 예제 코드를 실행하면 아래와 같이 적용되어 나타나게됩니다. 아래에서 구현된 모습을 확인해보세요.

Previous

CSS Property margin

Previous

[CSS] 웹사이트에 Print 프린트, 인쇄 버튼 만들기