동영상 강좌보기

CSS padding(여백)

CSS padding속성은 요소의 테두리 안쪽 여백을 정의합니다.

CSS를 사용하면 padding을 완벽하게 제어할 수 있습니다. 요소의 각면(위, 아래, 왼쪽, 오른쪽)에 대한 여백 설정을 위한 속성이 있습니다.

padding - 개별 속성

CSS에는 요소의 각 면에 대한 padding 지정을 위한 속성이 있습니다.

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

모든 padding속성은 다음 값을 가질 수 있습니다.

• length - px, pt, cm등의 단위로 값을 가질 수 있습니다.
  
• % - 요소의 너비에 대한 padding을 %로 지정합니다.
  
• inherit - padding은 부모 요소로부터 상속합니다.
  

** 음수값은 허용되지 않습니다.

다음 예는 <div>요소의 네 면에 다른 padding을 설정합니다.

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

padding - 속기 속성

코드를 단축하기 위해 모든 padding속성을 하나의 속성에 지정할 수 있습니다.

padding속성은 다음과 같은 개별 padding속성에 대한 속기 속성입니다.

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

작동하는 방법은 다음과 같습니다.

padding속성의 값이 네 개인 경우

padding : 25px 50px 75px 100px;

• top-padding : 25px
  
• right-padding : 50px
  
• bottom-padding : 75px
  
• left-padding : 100px
  

div {
    padding: 25px 50px 75px 100px;
}

padding속성값이 세 개인 경우

padding : 25px 50px 75px;

• top-padding : 25px
  
• right and left-padding : 50px
  
• bottom-padding : 75px
  

div {
    padding: 25px 50px 75px;
}

padding속성값이 두 개인 경우

padding : 25px 50px;

• top and bottom-padding : 25px
  
• right and left-padding : 50px
  

div {
    padding: 25px 50px;
}

padding속성값이 한 개인 경우

padding : 25px;

top and right and bottom and left-padding : 25px

div {
    padding: 25px;
}

padding 및 요소 너비

CSS width속성은 요소의 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 안쪽 여백, 테두리, 바깥쪽 여백을 포함합니다.(상자모델)

다음 예제에서 <div>요소의 폭은 300px입니다. 그러나 <div>요소의 실제 랜더링된 너비는 350px(300px + 25px왼쪽여백 + 25px오른쪽여백)입니다.

div {
    width: 300px;
    padding: 25px;
}

너비를 padding값과 관계없이 300픽셀로 유지하려면 box-sizing속성을 사용할 수 있습니다.

이 속성을 사용하면 요소는 폭을 유지할 수 있습니다. padding을 늘리면 컨텐츠 공간이 상대적으로 줄어듭니다. 다음은 그 예입니다.

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}