网页CSS样式——详述margin样式属性

最新推荐文章于 2024-04-15 19:17:28 发布

CandidBoy

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/CandidBoy/article/details/90366040

版权

这篇博客详细介绍了CSS中的margin样式属性，包括其作用、各种属性值（auto、length、%、inherit）的解释，并给出了实际示例。特别强调了margin属性可以设置1到4个值，以及margin: 0 auto实现水平居中效果。同时，文章讨论了外边距合并的现象及其在块级元素、行内元素和浮动元素中的不同表现。

摘要由CSDN通过智能技术生成

一、margin样式属性作用

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

二、margin样式属性值介绍

1、auto

浏览器计算外边距（CSS中auto一般是自动适应的意思，auto在水平方向上的作用是始终居中，但在垂直方向上不起作用，相当于0值）

2、length

浏规定以具体单位计的外边距值，比如像素、厘米等。默认值是0px。注：允许使用负值，不过要谨慎使用

比如这是margin：0 auto的代码及结果：

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

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

而margin：auto auto的代码及结果与上述一样，这里就不多增加同样的内容了，只需将margin值改一改一试便知。

3、%

规定基于父元素的宽度的百分比的外边距

4、inherit

规定应该从父元素继承外边距。注：IE浏览器不支持inherit属性值

上述2，3，4总示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>margin-top</title>
		<style type="text/css">
			div{border-style: dotted;}
			.two{margin:10px 30px 60px 150px;}
		</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

水平居中显示，上面介绍auto值时已经做了较为详细的解释，这里是因为margin：0 auto应用十分广泛，水平居中一般都这么写，所以专门列为一项注意事项

3、*{margin:0}

取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置

代码如下：

<!DOCTYPE html>
<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、外边距能否合并

块级元素的垂直相邻外边距会合并（即外边距合并），合并后的外边距间距等于两个外边距的较大者；行内元素实际上不占上下外边距；行内元素的左右外边距不会合并；浮动元素的外边距也不会合并。

外边距合并示例代码如下：


<!DOCTYPE html>
<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>

结果图如下：
在这里插入图片描述
行内元素外边距示例如下：

<!DOCTYPE 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>