解决margin塌陷问题

来源:互联网 发布:互联网与大数据的区别 编辑:程序博客网 时间:2024/06/10 04:26

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

源代码:

<!DOCTYPE html><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;}
原创粉丝点击