HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding</title>
<link href="style.css" rel="stylesheet">
<link href="padding.css" rel="stylesheet">
</head>
<body>
<h1>padding</h1>
<p id="p01">border를 기준으로 요소 내부의 양사방 여백</p>
<h2>1. padding의 각 방향별 지정 속성</h2>
<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>
<h2>2. padding의 값 갯수별 지정법</h2>
<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>
<form action="test.jsp">
<label for="nm" class="tt-u">name</label>
<input type="text" id="nm">
<label for="id" class="tt-u">id</label>
<input type="text" id="id">
<input type="submit" class="btn">
</form>
<p id="ph">
<img alt="pencils" class="ph01" src="img/123.jpg">
<img alt="pencils" class="ph02" src="img/jpg/pencils.jpg">
<img alt="pencils" class="ph03" src="img/jpg/pencils.jpg">
</p>
</body>
</html>
CSS
@charset "UTF-8";
/* 1. padding의 각 방향별 지정 속성 */
#p01 {border: 1px solid;
padding: 10px;}
#p01:hover {padding: 0;}
#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의 값 갯수별 지정법 */
#pdn>li {border: 1px solid; }
.pn4 {padding: 50px 80px 20px 100px;}
.pn3 {padding: 3em 25% 0.7em; }
.pn2 {padding: 2em 20%; }
.pn1 {padding: 4em;}
.tt-u {text-transform: uppercase;
text-shadow: 1px 1px 2px #333;
padding-right:0.5em; }
#nm {padding: 1em;}
#id {padding:0.6em 1em; }
.btn {padding: 0.5em 2em;}
#ph>img {width:400px;}
/* .ph01, .ph02, .ph03 {
width:400px;} */
.ph01 {border: 26px solid #036;
padding: 50px;}
.ph02 {border: 1px solid #333;
padding: 20px 20px 140px;
box-shadow: 2px 3px 12px #333;}
.ph03 {border-radius: 50%;
padding: 40px;}
.ph03:hover {
border-radius: 0;
transition:1s; }
