给子div设置的margin-top值在父div上生效了该怎么办？

洪七公 · 发表于 2022-7-13 14:20:19

1.问题产生：在写元素垂直水平居中时，有一种方式是设置子元素margin: 具体值 auto，但此时发现给子元素设置的margin-top值作用在了父元素上

<style>
.box1{
width: 200px;
height: 200px;
background-color: purple;
margin: 20px;
}
.inner{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: 50px auto;
}
</style>
<body>
<div class="box1">
<div class="inner">222</div>
</div>
</body>

复制代码

2.问题产生的原因：由于css外边距合并导致的

3.解决方案：

(1)方案一：设置父元素overflow:hidden

<style>
.box1{
width: 200px;
height: 200px;
background-color: purple;
margin: 20px;
overflow:hidden;
}
.inner{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: 50px auto;
}
</style>
<body>
<div class="box1">
<div class="inner">222</div>
</div>
</body>

复制代码

(2)方案二：给父元素设置有效的border(设置border-style 或者border: 1px solid #000均可）

<style>
.box1{
width: 200px;
height: 200px;
background-color: purple;
margin: 20px;
border-style: solid;
}
.inner{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">222</div>
</div>
</body>

复制代码

(3)方案三其实都是通过改变父级元素的display值(可以设为
display: flex;
display: grid;
display: -webkit-box;
display:inline-flex;
display: inline-grid;
)就可以了，子元素设置固定值或者auto均可实现垂直水平居中

<style>
.box1{
width: 200px;
height: 200px;
background-color: purple;
margin: 20px;
display: flex;
}
.inner{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">222</div>
</div>
</body>

复制代码

(4)方案四是设置父元素的before伪元素，子元素需设置margin:固定值 auto；方可实现垂直水平居中。

<style>
.box1{
width: 200px;
height: 200px;
background-color: purple;
margin: 20px;
}
.box1::before{
content: '';
display: table;
}
.inner{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">222</div>
</div>
</body>

复制代码

		自动登录	找回密码
密码			会员注册

[CSS/Html] 给子div设置的margin-top值在父div上生效了该怎么办？