在运行项目时,我们经常会遇到这样的问题,在给子块标签写外边距的时候,并没有达到自己想要的与父块标签上方产生距离,而是整体下移了。感觉软件出了问题,像这样:
事实上,在css里就有这样一个规律吧算是,当腹肌的第一个子级是块标签,并且使用了margin或margin-top的时候,容易出现塌陷问题。
解决办法有以下三种:
1. 这种方法也是我们最建议的一种方法,就是在父级使用overflow溢出隐藏解决;代码如下:
<!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>lizi</title>
<style>
*{
margin: 0px;
padding:0px;
}
div{
width: 200px;
height: 200px;
background-color: pink;
overflow: hidden;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: red;
margin-top: 50px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
其他方法也有,只不过有局限性。
2. 不使用margin,而是在父级使用padding-top,我们会发现使用完以后父级标签明显变宽,这是我们可以改变父级标签的高度height,如下:
3. 在已有的项目设计要求下对父级使用border,加边框。前提是,项目设计中有边框。效果如下: