CSS에서 padding 속성은 padding-top, padding-right, padding-bottom, padding-left 네 개의 값을 한 번에 지정할 수 있는 속기 속성(shorthand property)입니다.
속기 속성 기본 문법
값은 시계 방향(top → right → bottom → left) 순서로 적용됩니다.
예를 들어 다음과 같이 작성하면:
padding: 10px 5px 7px 10px;
각 값은 아래와 같이 해석됩니다.
top padding = 10px right padding = 5px bottom padding = 7px left padding = 10px
값 개수에 따른 규칙
- 값 4개: top, right, bottom, left 순서대로 적용
- 값 3개: top, 좌우(right/left), bottom 순서대로 적용
- 값 2개: 상하(top/bottom), 좌우(right/left) 순서대로 적용
- 값 1개: 네 방향 모두 동일하게 적용
예제 1: 백분율(%) 값으로 패딩 설정하기
다음 예제는 CSS padding 속성을 활용해 요소의 내부 여백을 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 300px;
padding: 5% 10% 20% 5%;
background-image: url("https://www.tutorialspoint.com/images/home_tensor_flow.png");
text-align: center;
font-weight: bold;
font-size: 1.2em;
box-sizing: border-box;
}
div > div {
border-radius: 80px;
padding: 2em 2em;
box-shadow: 0 0 4px 0.8px black;
}
</style>
</head>
<body>
<div>Learn TensorFlow
<div>TensorFlow is an open source machine learning framework for all developers.</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 부모 요소에는 백분율 기반의 패딩이, 자식 요소에는 em 단위의 패딩이 적용되어 내부 콘텐츠가 여백과 함께 배치된 것을 확인할 수 있습니다.
예제 2: 두 개의 값으로 상하·좌우 패딩 설정하기
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 100px;
padding: 5% 1%;
background-color: papayawhip;
border-radius: 5%;
box-sizing: border-box;
}
div > div {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 2em;
box-shadow: 0 0 9px 1px black;
}
span {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div></div>
<span><i>button</i></span>
</div>
</body>
</html>실행 결과
이 예제에서는 padding: 5% 1%처럼 값을 두 개만 지정하여 상하 패딩은 5%, 좌우 패딩은 1%로 간결하게 설정했습니다. 이처럼 속기 속성을 활용하면 코드를 더 짧고 가독성 있게 유지할 수 있습니다.
정리
CSS의 padding 속기 속성은 네 방향의 여백을 하나의 선언으로 처리할 수 있어 매우 유용합니다. 값의 개수에 따라 적용 규칙만 정확히 이해하면, 복잡한 레이아웃에서도 간결하고 효율적인 스타일 코드를 작성할 수 있습니다.