详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)

最新推荐文章于 2021-08-03 22:56:01 发布

泷憬

最新推荐文章于 2021-08-03 22:56:01 发布

阅读量7.9k

点赞数 4

分类专栏： CSS 文章标签： CSS之外边距样式属性

本文链接：https://blog.csdn.net/IT_Helianthus/article/details/90356824

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、margin-top样式属性

设置元素的上外边距，该属性有多个值：

值	描述
auto	浏览器设置的上外边距。
length	定义固定的上外边距。默认值是 0。允许使用负值。
%	定义基于父对象总高度的百分比上外边距。
inherit	规定应该从父元素继承上外边距。注：IE浏览器都不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>margin-top</title>
		<style type="text/css">
			div{border-style: dotted;}
			.two{margin-top:36px;}
		</style>
	</head>
	<body>
		<div class="one">第一个div</div>
		<div class="two">第二个div</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

二、margin-right样式属性

设置元素的右外边距，该属性有多个值：

值	描述
auto	浏览器设置的右外边距。
length	定义固定的右外边距。默认值是 0。允许使用负值。
%	定义基于父对象总高度的百分比右外边距。
inherit	规定应该从父元素继承右外边距。注：IE浏览器都不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>margin-right</title>
		<style type="text/css">
			.one{border-style: dotted;margin-right:36px;}
		</style>
	</head>

	<body>
		<div class="one">第一个div</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

三、margin-bottom样式属性

设置元素的下外边距，该属性有多个值：

值	描述
auto	浏览器计算下外边距。
length	规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。允许使用负值。
%	规定基于父元素的宽度的百分比的下外边距。
inherit	规定应该从父元素继承下外边距。注：IE浏览器都不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>margin-bottom</title>
		<style type="text/css">
			div{border-style: dotted;}
			.one{margin-bottom:36px;}
		</style>
	</head>

	<body>
		<div class="one">第一个div</div>
		<div class="two">第二个div</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

四、margin-left样式属性

设置元素的左外边距，该属性有多个值：

值	描述
auto	浏览器设置的左外边距。
length	定义固定的左外边距。默认值是0。允许使用负值。
%	定义基于父对象总高度的百分比左外边距。
inherit	规定应该从父元素继承左外边距。注：IE浏览器不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>margin-left</title>
		<style type="text/css">
			.one{border-style: dotted;margin-left:36px;}
		</style>
	</head>

	<body>
		<div class="one">第一个div</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

五、margin样式属性

用于在一个声明中设置所有外边距的宽度，或者设置各边上外边距的宽度。该属性有多个值：

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。注：允许使用负值，不过要谨慎使用；
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。注：IE浏览器不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>margin-top</title>
		<style type="text/css">
			div{border-style: dotted;}
			.two{margin:10px 30px 60px 150px;}//依次是top、right、bottom、left
		</style>
	</head>

	<body>
		<div class="one">第一个div</div>
		<div class="two">第二个div</div>
		<div class="three">第三个div</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
注意：
1、margin属性可以有1到4个值，如下图所示：

2、margin:0 auto;//水平居中显示。示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>居中显示</title>
		<style type="text/css">
			div{
				width:100px;
				margin:0 auto;
				border-style: dotted;
			}
		</style>
	</head>

	<body>
		<div>第一个div</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

<html>
	<head>
		<meta charset="UTF-8">
		<title>块级元素垂直居中</title>
        <style>
            .out {
                height: 600px;
                border: 2px solid;
            }
            .in {
                width: 100px;
                height: 100px;
                background: red;
                margin: 250px auto;
            }
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in"></div>
        </div>
    </body>
</html>

运行结果如下图：
在这里插入图片描述
3、*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置。示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>margin-top</title>
		<style type="text/css">
			*{margin:0;}
			div,p{border-style: dotted;}
		</style>
	</head>
	<body>
		<div>第一个div</div>
		<p>第二个div</p>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
4、块级元素的垂直相邻外边距会合并(即外边距合并)，合并后的外边距间距等于两个外边距高度中的较大者；行内元素实际上不占上下外边距；行内元素的的左右外边距不会合并；浮动元素的外边距也不会合并。示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>外边距的合并</title>
		<style type="text/css">
			*{margin:0;}
			p{border-style: dashed;border-width:1px;}
			#one{
				margin-bottom: 100px;
			}
			
			#two{
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<p id="one">文本段1</p>
		<p id="two">文本段2</p>
		<br/>
		<span>外边距的合并：上面id为one的文段下外边距为100px,id为two的文段上外边距为50px，但从显示的结果上看两者之间的间距取了其中的最大值，而不是两者之和，这就是外边距的合并</span>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			div{
				border-style:solid;
				display:inline;
			}
		</style>
	</head>
	<body>
		<div style="margin-left:100px;margin-right:100px;">
			第一个div标签
		</div>
		<div style="margin-left:100px;">
			第二个div标签
		</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

泷憬

关注

4
点赞
踩
46

收藏

觉得还不错? 一键收藏
1
评论
详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)

文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性一、margin-top样式属性设置元素的上外边距，该属性有多个值：值描述auto浏览器设置的上外边距。length定义固定的上外边距。默认值是 0。允许使用负值。%定义基于父对象总高...
复制链接

扫一扫

专栏目录