[html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)
지난 시간에는 margin 속성을 이용하여 레이아웃에 여백을 넣었습니다.
이번엔 padding 속성을 사용하여 레이아웃에 여백을 넣어 보겠습니다.
padding은 아래 그림에서 content(내용)와 border(선)사이의 공간을 말 합니다.
우선 아래 그림과 같은 레이아웃을 그려보았습니다.
지난 번 레이아웃에서 C D와 B 사이에 margin을 넣었다면,
이번엔 선 A를 하나 더 그려서, A와 B 사이에 padding을 넣는 방법입니다.
그림에 너비까지 계산해 보았는데요, 너비 값 계산 식은 다음과 같습니다
width+padding+margin+border
참고로 IE8과 IE 이전 버전에서는 width 속성 안에 padding과 border 값이 포함돼 있으므로
문서 타입을 규정해 주어야 합니다.
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)
|
padding 속성 사용법 |
padding 속성 사용 법은 margin과 같습니다
아래 지정값은 px, cm, %로도 지정할 수 있습니다*
*margin은 음수 값이 지정 가능하지만 padding은 음수값 지정이 안 됩니다*
padding-top (상단 여백)
padding-right (오른쪽 여백)
padding-bottom (아래 여백)
padding-left (왼쪽 여백)
사용 예
p {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
[4면 한꺼번에 padding 지정하기]
p {
padding: 5px 7px 3px 0px; (위, 오른쪽, 아래, 왼쪽 순임)
}
[4면이 모두 같을 때 padding 지정하기]
p {
padding: 5px;
}
[위, 오른쪽 왼쪽, 아래 padding 지정하기]
p {
padding: 5px 10px 0px:
}
[위 아래, 오른쪽 왼쪽 padding 지정하기]
p {
padding: 5px 10px;
}
[inline style로 넣어줄 때]
<p style="padding: 5px 10px;">동해물과 백두산이 마르고 닳토록 </p>
[external style로 넣어줄 때 ]
1. html로 아래와 같이 작성함
|
<!DOCTYPE html> <body> </html> |
2. 아래를 padding.css로 저장함
|
div#a{ #b{ #c{ |
실행 화면입니다.
상하좌우 모두 padding: 5px 로 했습니다.
댓글