语法
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>
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
