当前位置: 首页 > news >正文

margin失效问题——嵌套块元素引起的外边距坍塌

当一个div嵌套了另一个div时,父盒子设置了外边距,如:margin-top:50px;内部的子盒子也设置一个外边距margin-top:100px时,会发现子元素并没有如预期所想,与父盒子有个边距。反而父盒子与相领的盒子的margin取了2者的最大值。
如下所示:

    <div class="father"><div class="son1"></div><div class="son2"></div></div>

**预期:**父盒子距离顶部50px,第一个子盒子距离父盒子的上边框100px,距离第二个子盒子bottom+top,希望是150px。

    .father {margin-top: 50px;background-color: pink;width: 200px;height: 300px;}.son1 {margin-top: 100px;margin-bottom: 50px;background-color: yellow;width: 50px;height: 50px;}.son2 {margin-top: 100px;background-color: green;width: 50px;height: 50px;}

实际上:
第一个子盒子距离上边框100px,同时也带着父盒子也距离上边框100px。
在这里插入图片描述
第二个子盒子距离上一个是100px,不是预期的150px。
在这里插入图片描述
解决
1.父元素添加overflow:hidden;

 .father {margin-top: 50px;background-color: pink;width: 200px;height: 300px;overflow: hidden;}

2.父元素添加border

    .father {margin-top: 50px;background-color: pink;width: 200px;height: 300px;border-top: 1px solid transparent;}

3.父元素添加padding

    .father {padding-top: 1px;margin-top: 50px;background-color: pink;width: 200px;height: 300px;}

在这里插入图片描述


http://www.taodudu.cc/news/show-6105811.html

相关文章:

  • 页面布局高度塌陷问题和解决方案
  • 移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题
  • 实现边坍塌的网格简化方法
  • 盒子模型塌陷解决办法
  • LAMMPS模拟in和data文件集合
  • GAN_1——基础知识
  • [GAN学习笔记] 基础GAN(三)——WGAN
  • css防止高度塌陷,css之高度塌陷及其解决方法
  • 计算机图形学笔记十:Geometry3(网格处理)
  • 怎么样上台演讲(结合ppt)。。超级实用。。。
  • 商务流程
  • 业务范围(business area)
  • 国内外知名云服务公司介绍
  • 什么是企业管理咨询服务?
  • MiL.k x Bithumb x Yanolja宣布建立三方商务及市场营销合作关系
  • 移动商务,还是短信商务?
  • 什么样的人适合做外贸?能做好外贸?(非外贸零售)
  • 供应链服务平台方案:助供应链服务公司实现商品+决策+物流+售后协同办公
  • 公司的服务类型简介
  • 企业服务
  • 视频剪辑,就上这5个网站找素材,免费可商用。
  • 书单素材怎么找?教你寻找方法
  • 自媒体都在用的5个素材网站,视频、音效、图片全部免费下载~
  • 6个高清图片素材网站,找图片素材就靠他们了
  • 找高清视频素材,就上这6个网站。
  • 找高清图片素材,这8个网站就够了
  • 装甲板识别
  • 【图片新闻】低空穿越的美军MC-130J突击队II特种作战运输机
  • 智能物流仓储机器人|海格里斯HEGERLS货物夹抱式防倾倒装置四向穿梭车
  • 机器人学回炉重造(1-2):各种典型机械臂的正运动学建模(标准D-H法)