⛏️/HTML | CSS

[CSS] 5. margin

defyuil 2023. 10. 24. 15:17

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; }