CSS - padding
2020. 7. 27. 17:36ㆍWeb(CSS)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="padding.css" rel="stylesheet">
</head>
<body>
<h1>padding - 내부 여백</h1>
<ol id="ol-pd">
<li class="pn01">padding: n ; 양사방 동일</li>
<li class="pn02">padding: n n; 상하, 좌우 서로 동일</li>
<li class="pn03">padding: n n n; 상,좌우 동일, 하</li>
<li class="pn04">padding: n n n n; 상,우,하,좌</li>
</ol>
<ol id="ol-pd-dr">
<li>padding-top: ; 위쪽 내부여백</li>
<li>padding-right: ; 오른쪽 내부여백</li>
<li>padding-bottom: ; 아래쪽 내부여백</li>
<li>padding-left: ; 왼쪽 내부여백</li>
</ol>
<div id="pd-dr">
<a href="#">a</a> <b>b</b>
<span>span</span>
<label>label</label>
<input type="text" value="padding">
</div>
<img class="pola" alt="aaa" src="img/email.png"><br>
<div class="pola txt">
<img alt="aaa" src="img/email.png"><br>
aaa
</div>
</body>
</html>
@charset "UTF-8";
/* padding의 값 갯수별 지정차이 */
#ol-pd>li{
border: 1px solid;
color: #00f;
width: 200px;
}
.pn01{padding: 50px;}
.pn02{padding: 10px 50px;}
.pn03{padding: 0 60px 20px;}
.pn04{padding: 10px 10% 20px 15%;}
/* 각 방향별 padding지정 속성 */
#pd-dr{border: 3px dashed #49d;}
#pd-dr>*{background-color: #ff0;}
#pd-dr>a{padding-left: 20px;}
#pd-dr>b{padding-right: 20px;}
#pd-dr>span{padding-top: 20px;}
#pd-dr>label{padding-bottom: 20px;}
#pd-dr>input{
border: none;
padding: 0.35em 0.8em;}
.pola{border: 1px solid #333;
margin-top: 100px;
padding: 20px 20px 50px;}
.txt{
width: 640px;
font-family: "",cursive;
font-size: 50px;
text-align: right;
color: #4aa;
}
|
cs |
padding은 margin과 다르게 내부 여백을 가리키는 용어로 콘텐츠 영역 안에서의 크기를 좌우한다.
이것 또한 상하좌우의 순서를 잘 기억해서 크기를 주도록 하자
'Web(CSS)' 카테고리의 다른 글
| CSS - float (0) | 2020.07.31 |
|---|---|
| CSS- display (0) | 2020.07.31 |
| CSS - margin (0) | 2020.07.27 |
| CSS - text (0) | 2020.07.27 |
| CSS - font (0) | 2020.07.27 |