Margin
개요 : 이 속성은 요소에 마진을 지정한다.
- 블록 레벨 요소의 수직으로 인접한 여백은 겹쳐져서 큰 쪽의 여백이 전체 여백이 된다.
- 인라인 요소는 왼쪽과 오른쪽의 여백은 지정할 수 있지만, 위와 아래쪽은 지정할 수 없다.
정의
|
margin |
설명 |
|
값 |
<길이> | <백분율> | auto | inherit |
|
기본값 |
0 |
|
적용대상 |
위치된 요소 |
|
상속 |
안됨 |
|
백분율 |
용기 블럭의 크기를 참조 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
<길이> |
길이를 지정한다. |
|
<백분율> |
백분율(%) 값을 지정한다. 부모 요소를 기준으로 계산된다. |
|
auto |
자동으로 계산된 값을 지정한다. |
|
inherit |
부모 요소의 값을 상속하도록 지정한다. |
View Source :
<style>
.table1 {
margin: 15px;
}
.table2 {
margin: 15px 30px;
}
.table3 {
margin: 15px 5px 10px 15px;;
}
body {
font-size: 12px;
}
</style>
<body>
<p>margin:15px;</p>
<table width="180" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="150" height="50" border="0" cellpadding="0" cellspacing="0" class="table1">
<tr>
<td bgcolor="#00CC00">도레미파솔라시도레미파솔라시도레미파솔라시도레미파솔라시</td>
</tr>
</table></td>
</tr>
</table>
<p>marign: 15px 30px; (마주보는 것끼리. 즉, top과 bottom 15px, right와 left 30px)</p>
<table width="214" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="150" height="50" border="0" cellpadding="0" cellspacing="0" class="table2">
<tr>
<td bgcolor="#00CC00">도레미파솔라시도레미파솔라시도레미파솔라시도레미파솔라시</td>
</tr>
</table></td>
</tr>
</table>
<p> margin: 15px 5px 10px 15px;(top, right, bottom, left 순으로 적용)</p>
<table width="190" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="150" height="50" border="0" cellpadding="0" cellspacing="0" class="table3">
<tr>
<td bgcolor="#00CC00">도레미파솔라시도레미파솔라시도레미파솔라시도레미파솔라시</td>
</tr>
</table></td>
</tr>
</table>
</body>
Result :
''.' Programs > CSS' 카테고리의 다른 글
| Margin-Bottom (0) | 2012.03.20 |
|---|---|
| Margin-Left (0) | 2012.03.20 |
| Padding-Top (0) | 2012.03.20 |
| Padding-Right (0) | 2012.03.20 |
| Padding - Bottom (0) | 2012.03.20 |