margin Property

Home > Document > CSS > Layout > margin

페이지 목차

margin Property

margin Property는 아래의 DHTML과 같이 내용물과 내용물을 담고 있는 Box와의 거리를 padding, padding 바깥 쪽의 경계선을 border라고 한다면, margin은 내용물을 담고 있는 Box와 Box 자신을 담고 있는 상위 Box와의 거리를 말합니다. 이 margin이나 Padding 같은 Property들은 보통 무시하고 안 쓰는 경우가 태반인데 이 두가지 요소는 문서를 보기 좋게 꾸미기 위한 아주 중요한 요소라고 할 수 있습니다. 문단들이 여백(margin)없이 문서 양 끝에 딱 붙어 있다면 눈으로 보기 아주 답답해 보입니다. 적당한 여백이나 padding이 있어야 보기도 좋을 뿐더러 전달하고자 하는 문서의 내용이 보다 쉽게 전달 될 수 있죠. margin에 대해 알아 보기 위해서 예를 들어 아래와 같이 Coding 했다면

입력 
<HTML>
    <HEAD>
        <TITLE>CSS Box Model</TITLE>
    </HEAD>
    <BODY>
        <DIV style="border:1px solid tomato;">
            <SPAN></SPAN>
        </DIV>
    </BODY>
</HTML>

SPAN과 DIV 사이의 간격이 padding이고 DIV의 border는 1px solid tomato가 되며, BODY와 DIV 와의 간격이 margin이 된다... 머 이런 말이져. 그렇지만 만약에 BODY 속에 DIV, TABLE등과 같은 Box Element가 없다면 BODY 와 BODY속의 내용물과의 거리는 margin일 수도, padding일 수도 있습니다.



CSS Box Model
CSS Box Model
  MARGIN-TOP  
MARGIN-LEFT
  BORDER-TOP  
BORDER-LEFT
PADDING-LEFT PADDING-TOP PADDING-RIGTH
CONTENT
PADDING-BOTTOM
BORDER-RIGHT
  BORDER-BOTTOM  
MARGIN-RIGHT
  MARGIN-BOTTOM  


content area padding area border area margin area
content edge padding edge border edge margin edge



  [표 보는 방법]
margin Property
Value <margin-width>{1,4} | Inherit
Initial not defined for shorthand properties
Applies to all elements
Inherited no
Percentages refer to width of containing block
Media Visual
HTML Syntax { margin: sMargin }
Scripting object.style.margin [ = sMargin ]


CSS Scripting
onMouseOver="this.style.margin='5%';"


문서에 margin과 padding을 적용한 사례

아래의 예제는 P Element를 사용하여 문단을 정리하면서 좌우 여백을 브라우저 창의 5%로 하고, Table을 만들어 Cell의 좌측에 5px의 여백을 주는 예제가 되겠습니다.

입력 
<HTML>
    <HEAD>
        <TITLE>문서에 margin과 padding을 적용한 사례</TITLE>
    <STYLE type="text/css">
    <!-- 
    .horMargin{margin:0% 5%;}
    .cellPadding{padding-left:5px;border:1px solid #333333}
    .Para{text-align:justify;}
    -->
    </STYLE>
    </HEAD>
    <BODY class="horMargin">
        <P class="Para">아래의 예제는 P Element를 사용하여 문단을 정리하면서 좌우 여백을 
        브라우저 창의  5%로 하고, Table을 만들어 Cell의 좌측에 5px의 여백을 주는 예제가 
        되겠습니다.</P>
        <table border="0" cellpadding="0" cellspacing="2" width="100%">
          <tr>
            <td class="cellPadding">R1 C1</td>
            <td class="cellPadding">R1 C2</td>
          </tr>
          <tr>
            <td class="cellPadding">R2 C1</td>
            <td class="cellPadding">R2 C2</td>
          </tr>
        </table>
    </BODY>
</HTML>
출력결과

아래의 예제는 P Element를 사용하여 문단을 정리하면서 좌우 여백을 브라우저 창의 5%로 하고, Table을 만들어 Cell의 좌측에 5px의 여백을 주는 예제가 되겠습니다.

R1 C1 R1 C2
R2 C1 R2 C2



margin-top, margin-right, margin-bottom, margin-left Property

margin-top, margin-right, margin-bottom, margin-left Property들은 Box 4면에 단독적으로 margin을 지정하는 Property들입니다. 역시 margin-top 하나만을 예로 들겠습니다.

  [표 보는 방법]
margin-top, margin-right, margin-bottom, margin-left Property
Value <margin-width> | Inherit
Initial 0
Applies to all elements
Inherited no
Percentages refer to width of containing block
Media Visual
HTML Syntax { margin: sMargin }
Scripting object.style.marginTop(Right, Bottom, Left) [ = sMargin ]


CSS Scripting
onMouseOver="this.style.marginTop='10px';"


HTML
{ margin-top : 10%; }




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색