CSS 外边距（margin）

最新推荐文章于 2022-01-30 15:58:42 发布

_wjl_

最新推荐文章于 2022-01-30 15:58:42 发布

阅读量1.6k

点赞数 2

分类专栏： web前端

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外边距</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: gray;
/*		margin-top: 100px;
		margin-left: 50px;*/
		margin: 30px auto;  /*上下20 左右auto 可以块级带有宽度的盒子水平居中*/
		padding: 4px;
	}
	header {  /* 行内元素无这种效果 */
		width: 800px;
		height: 120px;
		background-color: black;
		margin: 0px auto;
	}
	</style>
</head>
<body>
	<div></div>
	<header>头部标签</header>
</body>
</html>

在这里插入图片描述

图片和背景图片文字和盒子对齐区别

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片和背景图片 文字和盒子对齐区别</title>
	<style>
	div {
		width: 300px;
		height: 100px;
		border: 1px solid gray;
		text-align: center; /*  文字在盒子中水平居中 */
		margin: 10px auto; /* 盒子水平居中 左右auto */
		line-height: 100px; /* 文字垂直居中 */
	}
	section {
		width: 300px;
		height: 300px;
		border: 1px solid #000;
	}
	section img {  插/*入图片更改大小 width 和 height */
		width: 200px;
		height: 210px;
		/*margin-top: 30px;
		margin-left: 20px;*/
		margin: 30px 50px;
	}
	aside {
		width: 300px;
		height: 300px;
		border: 1px solid green;
		background: #fff url(../images/l.jpg) 30px 50px no-repeat;
		background-size: 200px 210px;  /* 背景图片更改大小只能用 background-size */

	}
	</style>  
</head>
<body>
    <h3> 1.文字居中 和 盒子水平居中</h2>
    <hr />
	<div>信息时代</div>

	<h3>2.插入图片和背景图片</h3>
	<hr />
	<section>
	 <img src="../images/l.jpg" alt="">
	</section>
	<h3></h3><hr />
	<aside>
	   图片
	</aside>
	<<h3>3一般情况下 背景图片适合做一些小图标</h3>
</body>
</html>

在这里插入图片描述

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除元素的默认内外边距</title>
	<style>
	  div {
	  	width: 100px;
	  	height: 100px;
	  	background-color: purple;
	  }
	  ul {
	  	background-color: pink;
	  }
	  li {
	  	background-color: #f40;
	  }
	 /*  清除内外边距 */
	  body,ul,li {
	  	margin: 0; 
	  	padding: 0;
	  }
	</style>
</head>
<body>
	<div></div>
	<ul>
		<li>通讯</li>
		<li>通讯</li>
		<li>通讯</li>
	</ul>
</body>
</html>

在这里插入图片描述
注意：行内元素是只有左右内外边距的，是没有上下内外边距的。
尽量不要给行内元素指定上下的内外边距。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行内元素没有上下内外边距</title>
	<style>
	span {
		background-color: purple;
		margin: 30px 50px; /* 没有上下20  只有左右50 */
		padding: 20px;  /* 只有左右 */
	}
	</style>
</head>
<body>
	<span>行内元素</span>
</body>
</html>

在这里插入图片描述

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外边距合并</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: purple;
	}
	div:first-child {
		margin-bottom: 20px;
	}
	div:last-child {
		margin-top: 100px;
		background-color: gray;
	}
	</style>
</head>
<body>
	<div></div>
	<div></div>
</body>
</html>

在这里插入图片描述

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外边距合并(二)</title>
	<style>
	.father {
		width: 300px;
		height: 300px;
		background-color: pink;
		margin-top: 100px;
		/* border: 1px solid red; 解决外边距合并（塌陷）问题 */
		/* padding: 1px; */
		overflow: hidden;  

	}
	.son {
		width: 200px;
		height: 200px;
		background-color: purple;
		margin-top: 30px;  
	}
	</style>
</head>
<body>
<div class="father">
	<div class="son"></div>
</div>
</body>
</html>

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。

_wjl_

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 外边距（margin）

外边距（margin）margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。margin-top:上外边距margin-right:右外边距margin-bottom:下外边距margin-left:上外边距margin:上外边距右外边距下外边距左外边取值顺序跟内边距相同。外边距实现盒子居中可以让一个盒子实现水平居中，需要满...
复制链接

扫一扫