解决margin塌陷问题

magin塌陷: 在普通文档流中,当一个元素被包含在另一个元素中时,子元素设置margin-top无效。

源代码:


<html lang="zh-CN">
<head>
<meta charset="utf-8"> 
<style> 
body{margin:0;padding:0;}
.fu{background-color:pink;width:400px;height:400px;}
.zi{background-color:skyblue;width:100px;height:100px;margin-top:40px;}
/*margin-top设置无效*/
style>
head>
<body>
<div class="fu">
    <div class="zi">div>
div>
body>
html>

方式一:

//给父元素设置overflow:hidden
.fu{
    overflow: hidden;
}

方式二:

//给父元素设置一个border,不可为0和none
.fu{
    border: 1px solid transparent;
}

方式三:

//增加一个子元素,置于class="zi"的元素之前

<div class="fu">
    <span>span>
    <div class="zi">div>
div>

//css代码
span{
    display: inline-block;
    width:0;
    height:0;
}

你可能感兴趣的:(css)