CSS - margin
2020. 7. 27. 17:33ㆍ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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="margin.css" rel="stylesheet">
</head>
<body>
<h1>margin 요소의 외부 여백</h1>
<pre class="m01">
margin은 요소의 테두리를 기준으로 외부 여백이다.
양사방 존재함.
요소의 위치와 관련됨.
</pre>
<pre class="m02">
margin은 요소의 테두리를 기준으로 외부 여백이다.
양사방 존재함.
요소의 위치와 관련됨.
</pre>
<section id="sec01">
<h2>margin:n; 값이 하나로 양사방이 동일하게 적용됨</h2>
<div class="box01">margin: 50px;</div>
<div class="box02">margin: 10px;</div>
<div class="box03">margin: 10%;</div>
<div class="box04">margin: auto;</div>
</section>
<section id="sec02">
<h2>margin:n n; 값이 2개면 수직(상하)과 수평(좌우)이 각각 동일하게 적용됨</h2>
<div class="box05">margin: 100px 0;</div>
<div class="box06">margin: 0 100px;</div>
<div class="box07">margin: 50px 20%;</div>
<div class="box08"><b>margin: 0 auto;</b><br>
가로 크기가 100% 보다 작은 요소를 항상 중앙 정렬하고 싶으면<br>
margin: 0 auto;로 지정한다.<br>
* <b>수평방향을 auto</b>로 지정
</div>
</section>
<section id="sec03">
<h2>margin: n n n; 값이 3개면 상,수평(좌우),하 순서로 적용됨</h2>
<div class="box09">margin: 150px 50px 10px;</div>
</section>
<section id="sec04">
<h2>margin: n n n n; 값이 4개면 상,우,하,좌 순서로 적용됨</h2>
<div class="box10">margin: ;</div>
<div class="box11">margin: 50px 10% 80px 3%;</div>
<div class="box12">margin: ;</div>
</section>
<section id="sec05">
<label for="fnm">first-name</label><input type="text" id="fnm"><br>
<label for="lnm">last-name</label><input type="text" id="lnm"><br>
<!-- inline요소(줄이 안바뀌는 요소)들은 상하 적용이 안됨 -->
<!-- (input, img은 예외임) -->
</section>
<section id="sec06">
<h2>margin-top/-right/-bottom/-left : 각 방향별 지정속성 ;</h2>
<p class="mt">margin-top: 60px;</p>
<p class="mr">margin-right: 3em;</p>
<p class="mb">margin-bottom: 30px;</p>
<p class="ml">margin-left: 10px;</p>
<b>b tag</b> <i>i tag</i> <span>span tag</span>
</section>
</body>
</html>
@charset "UTF-8";
section{border: 4px dashed;margin: 3em 0;}
section>h2{border-bottom: 3px dashed #333;
margin: 2em 1em;}
.m01{border: 1px solid;margin: 100px;}
.m02{border: 1px solid;margin: 10%;}
/* margin: n; */
#sec01>div{border: 1px solid #f00;}
.box01{margin: 50px;}
.box02{margin: 10px;}
.box03{margin: 10%;}
.box04{width: 200px; margin: auto;}
/* margin: n n; */
#sec02>div{border: 1px solid #0d0;}
.box05{margin: 100px 0;}
.box06{margin: 0 100px;}
.box07{margin: 50px 20%;}
.box08{margin: 0 auto; width: 50%; height: 100px;}
/* margin: n n n; */
#sec03>div{border: 1px solid #ad0;
margin: 150px 50px 10px;}
/* margin: n n n n; */
#sec04>div{border: 1px solid #390;}
.box11{color: #a00;
margin: 50px 10% 80px 3%;}
#sec05>label{margin: 10px 20px 15px 8px;}
#sec05>input{margin: 10px 20px 15px 8px;}
#sec06>p{border: 1px solid green;}
.mt{margin-top: 60px;}
.mr{margin-right: 3em;}
.mb{margin-bottom: 30px;}
.ml{margin-left: 10%;}
#sec06>b{background-color: #5f0;
margin-left: 2em;
margin-top: 100px;}
#sec06>i{background-color: #f50;
margin-left: 5em;
margin-bottom: 100px;
}
#sec06>span{
background-color: #05f;
margin-left: 20%;
margin-bottom: 100px;
}
|
cs |
margin은 외부 여백을 가리키는 용어이고 단위를 주면 줄수록 콘텐츠 사이의 외부 여백이 띄어진다. 크기는 적절히 조절해 가면서 사용하면 되니 상하좌우의 순서만 잘 기억해서 크기를 주도록 하자.
'Web(CSS)' 카테고리의 다른 글
| CSS- display (0) | 2020.07.31 |
|---|---|
| CSS - padding (0) | 2020.07.27 |
| CSS - text (0) | 2020.07.27 |
| CSS - font (0) | 2020.07.27 |
| CSS - basic (0) | 2020.07.27 |