本文介绍: # margin 的使用margin 用于设置元素的外边距。margin 是一个简写属性,包括以下 4 个子属性:- margin–top:上外边距。- margin–right:右外边距。- margin–bottom:下外边距。- margin–left:左外边距。margin 可以设置 1 ~ 4 个属性值:1. 一个属性值:一起设置上下左右。2. 两个属性值:分别设置上下、左右。3. 三个属性值:分别设置上、左右、下。4. 四个
margin 的使用
- 一个属性值:一起设置上下左右。
- 两个属性值:分别设置上下、左右。
- 三个属性值:分别设置上、左右、下。
- 四个属性值:分别设置上右下左。
<length>
:使用一个有单位的长度值。可以使用负值。<percentage>
:使用一个百分比值。相对于元素的包含块的宽度。auto
:让浏览器自动计算外边距的大小,通常用于设置块级元素水平居中或平均分配空间。inherit
:继承父元素的外边距。
div {
width: 500px;
height: 500px;
background-color: antiquewhite;
margin: 0 auto; /* 设置块级元素水平居中 */
}
margin 合并问题
相邻元素之间
如果两个元素是同一父元素的相邻子元素,那么它们的上下外边距会合并。
可能会发生的情况:
在实际开发中,我们只需要留意这种情况的发生即可,不需要去解决。
父子元素之间
如果一个元素的上外边距和它的一个或多个后代元素的上外边距之间没有边框、内边距、内联内容来分隔;或者一个元素的下外边距和它的一个或多个后代元素的下外边距之间没有边框、内边距、内联内容、高度或最小高度来分隔,那么这些外边距会合并。合并后的外边距会出现在父元素的外面。
BFC(Block Formatting Context,块级格式化上下文)可以解决父子元素之间的 margin 合并问题。
会发生父子元素之间的 margin 合并问题的原因是,父元素无法计算出自身的边界。当一个元素形成 BFC 时,它会创建一个独立的渲染环境,使得元素内部的布局与外部元素隔离开来。在创建独立的渲染环境时,父元素就能计算出自身的边界,所以可以解决父子元素之间的 margin 合并问题。
以下类型的元素能形成 BFC:
- 根元素(
<html>
)。 - float 不为 none 的元素。
- position 为 absolute / fixed 的元素。
- display 为 inline–block 的元素。
- overflow 值不为 visible 的块级元素。
- 弹性盒子(display 为 flex / inline–flex),其中的子元素不是弹性盒子、网格容器或表格容器(display 为 table / inline–table)。
- 网格容器(display 为 grid / inline–grid),其中的子元素不是弹性盒子、网格容器或表格容器(display 为 table / inline–table)。
<div class="bfc">
<div></div>
<div></div>
</div>
.bfc {
background: antiquewhite;
overflow: hidden; /* 创建新的 BFC */
}
.bfc div {
width: 50px;
height: 50px;
background: wheat;
}
.bfc div:nth-child(1) {
margin: 10px;
}
.bfc div:nth-child(2) {
margin: 20px;
}
原文地址:https://blog.csdn.net/Superman_H/article/details/131645296
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_32496.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。