CSS padding 속성은 요소의 내용과 테두리 사이에 공백을 정의한다. (음수값 허용안됨)
상단, 우측, 하단, 좌측 여백은 구별된 속성을 사용하여 독립적으로 변경될 수 있다.
단축 padding 속성은 한번에 여러면(상,하,좌,우)을 제어하기 위해 생성된다.
CSS padding Property
padding 속성은 한번의 선언으로 모든 padding 속성을 지정하는 단축 속성이다.
(음수값 허용안됨) (상속불가)
Values
padding-top | padding-right | padding-bottom | padding-left
CSS padding-bottom Property
padding-bottom 속성은 요소의 하단 여백을 지정한다. (음수값 허용안됨)
(상속불가)
Values
length - 고정된 아래 여백을 정의한다.
% - 가장 가까운 요소의 높이의 %로 아래 여백을 정의한다.
상단, 우측, 하단, 좌측 여백은 구별된 속성을 사용하여 독립적으로 변경될 수 있다.
단축 padding 속성은 한번에 여러면(상,하,좌,우)을 제어하기 위해 생성된다.
CSS padding Property
padding 속성은 한번의 선언으로 모든 padding 속성을 지정하는 단축 속성이다.
(음수값 허용안됨) (상속불가)
h1 {padding: 10px}
/* 여백은 상,하,좌,우 모두 10px */
h1 {padding: 10px 2%}
/* 상단과 하단 여백은 10px, 좌측과 우측 여백은 가장 가까운 요소 가로길이의 2% */
h1 {padding: 10px 2% 15px}
/* 상단 여백은 10px, 좌,우측 여백은 가장 가까운 요소 가로길이의 2%, 하단 여백은 15px */
h1 {padding: 10px 2% 15px 20px}
/* 상단 여백은 10px, 우측 여백은 2%, 하단 여백은 15px, 좌측 여백은 20px */
/* 여백은 상,하,좌,우 모두 10px */
h1 {padding: 10px 2%}
/* 상단과 하단 여백은 10px, 좌측과 우측 여백은 가장 가까운 요소 가로길이의 2% */
h1 {padding: 10px 2% 15px}
/* 상단 여백은 10px, 좌,우측 여백은 가장 가까운 요소 가로길이의 2%, 하단 여백은 15px */
h1 {padding: 10px 2% 15px 20px}
/* 상단 여백은 10px, 우측 여백은 2%, 하단 여백은 15px, 좌측 여백은 20px */
Values
padding-top | padding-right | padding-bottom | padding-left
<!-- 전체 여백 지정 -->
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
1.5cm
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
0.5cm 2.5cm
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
1.5cm
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
0.5cm 2.5cm
</td>
</tr>
</table>
</body>
</html>
CSS padding-bottom Property
padding-bottom 속성은 요소의 하단 여백을 지정한다. (음수값 허용안됨)
(상속불가)
h1
{
padding-bottom: 10px
}
{
padding-bottom: 10px
}
Values
length - 고정된 아래 여백을 정의한다.
% - 가장 가까운 요소의 높이의 %로 아래 여백을 정의한다.
<!-- 아래 여백 지정 -->>
<html>
<head>
<style type="text/css">
td {padding-bottom: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
some text
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<style type="text/css">
td {padding-bottom: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
some text
</td>
</tr>
</table>
</body>
</html>
WRITTEN BY
- 손가락귀신
정신 못차리면, 벌 받는다.
,
