如何解决兄弟元素或父子元素margin边距失效问题
如何解决兄弟元素或父子元素margin边距失效问题
蓓蕾心晴
发布于 2022-11-21 09:18:29
发布于 2022-11-21 09:18:29
代码可运行
运行总次数：0
代码可运行
背景：兄弟元素或父子元素同时设margin边距时，会导致margin边距会按照最大的那个边距展示，解决方案，行程 BFC，块级格式化上下文，来消除该问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BFC</title>
<style>
.up {
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 100px;
}
.down {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 100px;
/* 触发BFC */
display: inline-block;
/* 以下也可以，这里兄弟都有高度，如果比如兄弟 1 没有设高度，兄弟 1 的子元素又设了margin，也会导致margin失效，通过给兄弟 1 设overflow:hidden来解决 */
/* display: inline-flex; */
}
/* up和down两个元素处于不同的BFC ，外边距不重合 */
.parent {
width: 100px;
height: 200px;
background: red;
margin-top: 50px;
/* 触发父元素FBFC,取消上边距合并 */
/* 父子解决margin边距重合的问题，使用 overflow:hidden */
overflow: hidden;
/* display: inline-block; */
/* display: flex; */
/* display: inline-flex; */
/* display: table; */
/* display: table-cell; 会导致父元素的margin失效，慎用 */
}
.child {
width: 50px;
height: 50px;
margin-top: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="up">我在上面</div>
<div class="down">我在下面</div>
<div class="parent">
<div class="child">我是儿子</div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
