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
°Ë»ö