본문 바로가기

'.' Programs/CSS

Margin-Top


Margin-Top

개요 : 이 속성은 요소의 위쪽 마진을 지정한다.

정의

margin-top

설명

<길이> | <백분율> | auto | inherit

기본값

auto

적용대상

위치된 요소

상속

안됨

백분율

용기 블럭의 크기를 참조

미디어

visual

설명

<길이>

길이를 지정한다.

<백분율>

백분율(%) 값을 지정한다. 부모 요소를 기준으로 계산된다.

auto

자동으로 계산된 값을 지정한다.

inherit

부모 요소의 값을 상속하도록 지정한다.


View Source :

<!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-top: 10px;
}
body {
font-size: 12px;
}
-->
</style>
<body>
<table width="396" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="50"><table width="150" height="50" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFCC00">도레미파솔라시도레미파솔라시도레미파솔라시도레미파솔라시</td>
</tr>
</table></td>
<td width="240">&nbsp;margin 설정하지 않았을 경우</td>
</tr>
</table>
<br />
<table width="392" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="50"><table width="150" height="50" border="0" cellpadding="0" cellspacing="0" class="table1">
<tr>
<td bgcolor="#FFCC00">도레미파솔라시도레미파솔라시도레미파솔라시도레미파솔라시</td>
</tr>
</table></td>
<td width="236">&nbsp;margin-top 설정 후</td>
</tr>
</table>
</body>

Result :

''.' Programs > CSS' 카테고리의 다른 글

Min-Height  (0) 2012.03.20
Max-Height  (0) 2012.03.20
Margin-Right  (0) 2012.03.20
Margin-Bottom  (0) 2012.03.20
Margin-Left  (0) 2012.03.20