CSS에서는 요소의 상·하·좌·우 각 면에 대해 서로 다른 패딩 값을 개별적으로 지정할 수 있습니다. padding-top, padding-right, padding-bottom, padding-left 속성은 각각 위, 오른쪽, 아래, 왼쪽 방향의 안쪽 여백을 담당합니다.
또한 padding 단축 속성(shorthand)을 사용하면 시계 방향(위 → 오른쪽 → 아래 → 왼쪽) 순서로 값을 나열하여 같은 결과를 더 간결하게 얻을 수 있습니다. 참고로 값을 하나만 지정하면 네 면 모두에 적용되며, 두 개를 지정하면 첫 번째 값은 위/아래, 두 번째 값은 좌/우에 적용됩니다.
문법
CSS 패딩 속성의 기본 문법은 다음과 같습니다.
Selector {
padding-top: /*값*/
padding-right: /*값*/
padding-bottom: /*값*/
padding-left: /*값*/
}다음 예제들을 통해 요소에 패딩을 적용하는 다양한 방법을 살펴보겠습니다.
예제 1 — span 요소에 좌우 패딩 적용하기
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2em 1em;
padding: 3%;
background-color: plum;
letter-spacing: 0.05em;
}
span {
padding: 0 53%;
border-right: dashed;
background-image: linear-gradient(to right, lavenderblush, lightblue);
font-size: 1.4em;
font-style: italic;
}
</style>
</head>
<body>
<h2>What is Xamarin?</h2>
<article>
<span>Xamarin is a software company based in San Francisco. Xamarin is built on the .NET Framework.</span> It provides commercial software development tools that allow a user to develop applications for Android, iOS and Windows using C# language and the .NET framework.
</article>
</body>
</html>실행 결과
위 예제에서는 span 요소에 padding: 0 53%를 적용하여 위/아래 패딩은 0으로, 좌/우 패딩은 부모 요소 너비의 53%로 설정했습니다. 그 결과 텍스트 주변에 넓은 좌우 여백이 생기고, 오른쪽에는 점선 테두리와 그라데이션 배경이 함께 표시됩니다.
예제 2 — 각 방향별 패딩을 개별적으로 지정하기
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
padding-left: 30px;
padding-top: 44px;
padding-bottom: 60px;
background-image: linear-gradient(to bottom, oldlace, lightblue);
border: thin solid;
text-align: center;
}
div > div {
padding-right: 70px;
}
</style>
</head>
<body>
<h2>Swift programming language by Apple</h2>
<div>Swift is a programming language developed by Apple Inc for iOS and OS X development.
<div>Swift 4 uses the same runtime as the existing Obj-C system on Mac OS and iOS, which enables Swift 4 programs to run on many existing iOS 6 and OS X 10.8 platforms.
</div>
</div>
</body>
</html>실행 결과
이번 예제에서는 외부 div에 왼쪽 30px, 위 44px, 아래 60px의 패딩을 각각 지정하고, 자식 div에는 자식 선택자(div > div)를 이용해 오른쪽 패딩 70px만 별도로 적용했습니다. 이처럼 개별 패딩 속성을 활용하면 요소 내부의 여백을 원하는 방향으로 세밀하게 조절할 수 있습니다.