老师 有一个问题想请教一下
为什么子元素的顶部外边距在父元素外面，而没在父元素里面呢，除了给子元素添加绝对定位还有什么方法能让子元素的顶部外边距在父元素里面呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 400px;
width: 200px;
background-color: greenyellow;
}
.content {
height: 200px;
width: 100px;
background-color: grey;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
正在回答
同学你好，不是的，只有margin-top会出现这种情况。祝学习愉快~
同学你好，这是出现了margin传递，也就是：在一个父子元素结构里，如果子元素设置了margin-top值 会出现一个问题，子元素的margin-top会作用到父级元素。
有如下几种解决方法，了解一下，以后要是遇到这种情况知道怎么解决就可以了
（1）给父元素添加border或border-top。
（2） 给父元素添加padding或padding-top。
（3）给父元素设置overflow:hidden。
（4）给父元素设置float属性
（5）给父元素设置绝对定位或者固定定位
（6）将子元素margin-top,变为padding-top。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星