语法

margin-top: length | auto | initial | inherit;

margin-top 属性示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .margin-top {
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top 属性示例</h2>
    <p>No specified margin.</p>
    <p class="margin-top"> 将此文本的顶部边距指定为 100 像素。</p>
  </body>
</html>

“em”中指定的 margin-top 属性示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p.example {
        margin-top: 5em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top 属性示例</h2>
    <p>是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
    <p class="example">是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
    <p>是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
  </body>
</html>

“%”中指定的 margin-top 属性示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .margin-top {
        margin-top: 10%;
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top 属性示例</h2>
    <p>No specified margin.</p>
    <p class="margin-top"> 将顶部边距设置为10%</p>
  </body>
</html>

具有“初始”值的 margin-top 属性示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .margin-top {
        margin-top: initial;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top 属性示例</h2>
    <p>No specified margin.</p>
    <p class="margin-top"> Margin top is specified for this text.</p>
  </body>
</html>

具有“继承”值的 margin-top 属性示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        margin-top: 50px;
      }
      .margin-top {
        margin-top: inherit;
        background-color: lime;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top 属性示例</h2>
    <div>
      Here is some text.
      <p class="margin-top"> Margin top is specified for this text.</p>
    </div>
  </body>
</html>
CSS margin-top 属性

margin-top 属性用于定义元素的顶部边距。

此属性不影响内联元素,例如 <span>。

元素的顶部和底部边距可以合并为一个,等于两个边距中最大的一个。
但是,这只发生在垂直边距的情况下。

允许负值。

初始值0.
应用于所有元素。它还适用于::first-letter伪元素。
继承无效
可动画的是的。元素的顶部边缘是有动画的。
版本CSS2.
DOM 语法object.Style.Margintop =“50px”;

CSS margin-top 属性值说明

描述
auto设置顶部边距。这是此属性的默认值。
length在PX,Pt,cm等中定义顶部边距。默认值为0。
%设置包含元素%的顶部边距。
initial使属性使用其默认值。
inherit从父母元素继承属性。
日期:2020-06-02 22:14:38 来源:oir作者:oir