css margin-top设置html元素之间的距离

最新推荐文章于 2021-06-28 19:59:40 发布

weixin_33775572

最新推荐文章于 2021-06-28 19:59:40 发布

阅读量982

点赞数 1

原文链接：http://www.cnblogs.com/myhomepages/p/6010068.html

版权

css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离。这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例，需要的朋友可以参考一下。

css margin-top介绍

css margin-top属性指从某一元素的上边框开始，到另外一个相邻的元素的下外边距之间的距离。

每一个元素都存在着外边距。两个相邻的元素之间是靠它们的外边距排列在一起的。

语法：

margin-top:值(如:10px)

例如：

margin-top:10px

表示设置该对象上边距离与上一个对象盒子距离为10 像素

css margin-top取值

margin-top的取值可以设置以下四种情况：

值	描述
auto	浏览器设置的上外边距。
length	定义固定的上外边距。默认值是 0。
%	定义基于父对象总高度的百分比上外边距。
inherit	规定应该从父元素继承上外边距。

一般网站开发中，我们建议大家使用像素px作为margin-top的单位。

css margin-top实例

设置一个class为ex1的p元素的上边距与上一个HTML元素的上边距为2cm

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {margin-top:2cm;}
</style>
</head>
<body>
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 2cm top margin.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>

在线运行

原文地址：http://www.manongjc.com/article/1264.html

其他阅读：

css :after伪类选择器使用详解 css :active选择器设置被激活链接的样式 css 设置margin-top或margin-bottom失效不取作用的解决方法 css margin-bottom设置HTML元素之间底(下)边距离 css margin:0 auto无法居中的原因

转载于:https://www.cnblogs.com/myhomepages/p/6010068.html

weixin_33775572

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css margin-top设置html元素之间的距离

css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离。这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例，需要的朋友可以参考一下。css margin-top介绍css margin-top属性指从某一元素的上边框开始，到另外一个相邻的元素的下外边距之间的距离。每一个元素都存在着外边距。两个相邻的元素之间是靠它们的外边距排...
复制链接

扫一扫