CSS 外边距（margin）

xiaoxiao2023-11-07 139

外边距（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。

最新回复(0)