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