HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
<link href="style.css" rel="stylesheet">
<link href="margin.css" rel="stylesheet">
</head>
<body>
<h1>margin</h1>
<p id="mg">border를 기준으로 요소 외부의 양사방 여백</p>
<h2>1.margin의 각 방향별 지정 속성</h2>
<ul id="mdr">
<li class="mt">margin-top:n;위쪽에만 n만큼 지정</li>
<li class="mr">margin-right::n;우측에만 n만큼 지정</li>
<li class="mb">margin-bottom:n;아래만 n만큼 지정</li>
<li class="ml">margin-left:n;좌측에만 n만큼 지정</li>
</ul>
<h2>2.margin의 값 갯수별 지정법</h2>
<ul id="mgn">
<li class="mgn01">margin:n ; 양사방 n으로 동일</li>
<li class="mgn02">margin:n n; 상하, 좌우 서로 동일</li>
<li class="mgn03">margin:n n n; 상, 좌우 동일, 하 순서</li>
<li class="mgn04">margin:n n n n; 상 우 하 좌 순서로 각각</li>
</ul>
<form action="test.jsp">
<p>
block요소는 인접요소 끼리의 상하 margin은 큰 값이 적용됨.<br>
inline요소는 상하 margin 적용 안됨.<br>
인접요소 끼리의 좌우 margin은 서로 더하기 됨.<br>
*block요소를 항상 정중앙에 배치할 때는<br>
margin: n auto;적용(auto=좌우 margin이 항상 같음)
</p>
<div id="itw">
<b class="it">itwill</b><span class="bs">busan</span>
</div>
<div id="inbox">
<label for="nm">name</label>
<input type="text" id="nm">
<label for="id">id</label>
<input type="text" id="id"> <br>
<input type="submit" id="btn">
</div>
</form>
</body>
</html>
CSS
@charset "UTF-8";
#mg {border: 1px solid;
margin: 10px;}
/* 1.margin의 각 방향별 지정 속성 */
#mdr>li {border: 1px solid;}
.mt {margin-top: 4em;}
.mr {margin-right: 20%;
text-align: right; }
.mb {margin-bottom: 20px;}
.ml {margin-left: 20%;}
/* 2.margin의 값 갯수별 지정 */
form {border: 1px solid blue;
width: 500px;
/* margin-left: auto;
margin-right: auto; */
margin: 2em auto;}
#mgn>li {border: 1px solid;}
.mgn01 {margin: 50px;}
.mgn02 {margin: 20px 50px;}
.mgn03 {margin: 20px 50px 30px;}
.mgn04 {margin: 20px 10% 50px 5%;}
#itw {/* border: 1px solid red; */
margin-bottom: 3em;
margin-left: 1.5em;
font-size: 30px;}
#inbox {/* border: 1px solid red; */
width: 450px;
text-align:center;}
label {background-color: #ccc;
text-transform: uppercase;
font-weight: bold;
font-size:1.2em;
width:80px /* 적용불가 */;
padding: 5px 20px;
vertical-align:middle/*
인라인요소끼리의 수직정렬 */;
color: #333;}
.it {margin-right: 1em;
margin-bottom: 3em;}
.bs {margin-left: 1em;
margin-bottom: 3em;}
#itw {/* border:1px solid #f00; */
width:230px;
margin:30px auto; }
#nm, #id {border:3px solid #ccc;
width: 80px;
padding: 5px;}
#nm {margin-right: 5em;}
#btn {/* margin-top:30px;
margin-left:auto;
margin-right: auto; */
margin:30px auto;
padding:10px 50px; }
