margin

发表于 更新于 分类于 阅读次数：

margin

margin属性设置元素与其他外部元素之间的边距，并且是以下属性的简写属性： - margin-top - margin-right - margin-bottom - margin-left

设置4个属性值

margin: 10px 5px 15px 20px;

  • top margin is 10px
  • right margin is 5px
  • bottom margin is 15px
  • left margin is 20px

设置3个属性值

margin: 10px 5px 15px;

  • top margin is 10px
  • right and left margins are 5px

bottom margin is 15px

设置2个属性值

margin: 10px 5px;

  • top and bottom margins are 10px

right and left margins are 5px

设置1个属性值

  • margin: 10px;

all four margins are 10px

Note: 允许使用负值

属性值列表
Value Description
length Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed.
% Specifies a margin in percent of the width of the containing element
auto The browser calculates a margin
inherit Inherits this property from its parent element.

举例：

1
2
3
4
5
<p style="background-color:#def7f7">A paragraph with no specified margins.没有指定margin值的段落</p>
<p style="margin: 35px 70px 50px 90px;background-color:#def7f7">这个段落一共指定了四个MARGIN值。分别为上35px、右70px、下50px、左90px\uh</p>
<p style="margin:20px 40px 60px;background-color:#def7f7">这个段落一共指定了三个margin值，分别是上20px、右左40px、下60px</p>
<p style="margin:30px 60px;background-color:#def7f7">这个段落一共指定了两个margin值，分别是上下30、右左60px</p>
<p style="margin:  50px ;background-color:#def7f7">这个段落一共指定了一个margin值，则所有边都是50px</p>

A paragraph with no specified margins.没有指定margin值的段落

这个段落一共指定了四个MARGIN值。分别为上35px、右70px、下50px、左90px\uh

这个段落一共指定了三个margin值，分别是上20px、右左40px、下60px

这个段落一共指定了两个margin值，分别是上下30、右左60px

这个段落一共指定了一个margin值，则所有边都是50px