개요
이 속성은 요소에 마진을 지정한다.
- 블록 레벨 요소의 수직으로 인접한 여백은 겹쳐져서 큰 쪽의 여백이 전체 여백이 된다.
- 인라인 요소는 왼쪽과 오른쪽의 여백은 지정할 수 있지만, 위와 아래쪽은 지정할 수 없다.
정의
값
| 값 | 설명 |
|---|
| <길이> | 길이를 지정한다. |
| <백분율> | 백분율(%) 값을 지정한다. 부모 요소를 기준으로 계산된다. |
| auto | 자동으로 계산된 값을 지정한다. |
| inherit | 부모 요소의 값을 상속하도록 지정한다. |
예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.table1 {
margin: 15px;
}
.table2 {
margin: 15px 30px;
}
.table3 {
margin: 15px 5px 10px 15px;;
}
body {
font-size: 12px;
}
-->
</style></head>
<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>
</html>
브라우저 호환성
| 값 | IE6 | IE7 | FF2 | Op9 |
|---|
| (Length) | 지원 | 지원 | 지원 | 지원 |
| (Percentage) | 불안정 | 지원 | 지원 | 지원 |
| auto | 불안정 | 불안정 | 지원 | 지원 |
| inherit | 미지원 | 미지원 | 지원 | 지원 |
고경희 (211.110.121.143)
2009년 08월 01일, 14:54
