HTML DOM margin ÊôÐÔ

HTML DOM Style ¶ÔÏó

¶¨ÒåºÍÓ÷¨

margin ÊôÐÔÉèÖÃÔªËØµÄÍâ±ß¾à¡£

¸ÃÊôÐÔ¿ÉʹÓà 1 µ½ 4 ¸öÖµ£º

  • Èç¹û¹æ¶¨Ò»¸öÖµ£¬±ÈÈç div {margin: 50px} - ËùÓеÄÍâ±ß¾à¶¼ÊÇ 50 px
  • Èç¹û¹æ¶¨Á½¸öÖµ£¬±ÈÈç div {margin: 50px 10px} - ÉÏÏÂÍâ±ß¾àÊÇ 50px£¬×óÓÒÍâ±ß¾àÊÇ 10 px¡£
  • Èç¹û¹æ¶¨Èý¸öÖµ£¬±ÈÈç div {margin: 50px 10px 20px}- ÉÏÍâ±ß¾àÊÇ 50 px£¬¶ø×óÓÒÍâ±ß¾àÊÇ 10 px£¬ÏÂÍâ±ß¾àÊÇ 20 px¡£
  • Èç¹û¹æ¶¨ËĸöÖµ£¬±ÈÈç div {margin: 50px 10px 20px 30px} - ÉÏÍâ±ß¾àÊÇ 50 px£¬ÓÒÍâ±ß¾àÊÇ 10 px£¬ÏÂÍâ±ß¾àÊÇ 20 px£¬×óÍâ±ß¾àÊÇ 30 px¡£

Óï·¨£º

Object.style.margin=margin

¿ÉÄܵÄÖµ£º

Öµ ÃèÊö
margin

ÉèÖÃÍâ±ß¾à¡£

Öµ¿ÉÒÔÊÇ£º

  • °Ù·Ö±È£¨»ùÓÚ¸¸¶ÔÏó×ܸ߶Ȼò¿í¶ÈµÄ°Ù·Ö±È£©
  • ³¤¶ÈÖµ£¨¶¨ÒåÒ»¸ö¹Ì¶¨µÄ±ß¾à£©
  • auto£¨ä¯ÀÀÆ÷É趨µÄÖµ£©¡£

ʵÀý

ÏÂÃæµÄÀý×ӸıäÁ˶ÎÂäµÄÍâ±ß¾à£º

<html>
<head>
<script type="text/javascript">
function changeMargin()
{
document.getElementById("p1").style.margin="100px";
}
</script>
</head>
<body>

<input type="button" onclick="changeMargin()"
value="Change margins of a paragraph" />

<p id="p1">This is a paragraph</p>

</body>
</html>

HTML DOM Style ¶ÔÏó

VUE