[CSS] padding

border를 기준으로 요소 내부의 양사방 여백

1. padding의 각 방향별 지정 속성

<ul id="pdr">
 	<li class="pt">padding-top:n; 위쪽에만 n만큼 지정</li>
 	<li class="pr">padding-right:n; 우측에만 n만큼 지정</li>
 	<li class="pb">padding-bottom:n; 아래만 n만큼 지정</li>
 	<li class="pl">padding-left:n; 좌쪽에만 n만큼 지정</li>
 </ul>

#p01 {border: 1px solid;
	  padding: 10px;}

#pdr>li { border: 1px solid;}

.pt {padding-top: 30px;}
.pr{text-align: right;
	padding-right: 30px;}
.pb {padding-bottom: 30px;}
.pl{padding-left: 10%;

2. padding의 값 갯수별 지정법

<ul id="pdn">
 	<li class="pn4">padding:n n n n; 상 우 하 좌 순서로 각각 </li>
 	<li class="pn3">padding:n n n; 상, 좌우동일, 하 순서</li>
 	<li class="pn2">padding:n n; 상하, 좌우 서로 동일</li>
 	<li class="pn1">padding:n; 양사방 n으로 동일</li>
 </ul>

/* 2. padding의 값 갯수별 지정법 */

#pdn>li {border:1px solid;}

.pn4 {padding: 50px 80px 20px 100px;}