css 패딩(padding) 속성

css 패딩(padding) 속성은 콘텐츠와 테두리 사이의 공간을 의미합니다. 패딩 속성을 사용해서 공간의 상하좌우 크기를 조절할 수 있습니다.

 

단일 값으로 적용하기

 

apply to all four sides
button {
        padding: 10px;
}

 

 상하좌우 동일하게 적용이 됩니다.

 

수직 수평 적용하기

 

vertical | horizontal
button {
        padding: 5px 10px;
}

 

첫 번째 값은 상단 하단에 두 번째 값은 좌측 우측에 적용이 됩니다.

 

상단 좌우 하단 적용하기

 

top | horizontal | bottom
button {
        padding: 1px 2px 2px;
}

 

첫 번째 값은 상단에 두 번째 값은 좌측 우측에 세 번째 값은 하단에 적용이 됩니다.

 

상하좌우 각각 적용하기

 

top | right | bottom | left
button {
        padding: 5px 1px 0 2px;
}

 

시계방향 순서로 적용이 됩니다.