博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS 之 嵌套 margin-top 处理
阅读量:5162 次
发布时间:2019-06-13

本文共 836 字,大约阅读时间需要 2 分钟。

  如下代码:

  会发现,内层div的margin-top显示在了外层div上。

  这个“问题”……它是CSS2.1的盒模型中规定的内容——:

  In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

  所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。

  解决方案:

  给 Outer Div 加上 padding/border,或者

  1.给父层添加:overflow:hidden;
  2.给父层添加:padding 或 border除none以外的属性
  3.给父层添加:padding-top代替margin-top的效果。
  4.给 外层
Div / 内层
Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。

 

转载于:https://www.cnblogs.com/xinaixia/p/5563506.html

你可能感兴趣的文章
解决VisualStudio2010中鼠标滚轮不可用的问题
查看>>
改旧代码有感
查看>>
团体程序设计天梯赛 L1-049. 天梯赛座位分配(测试数据+不同方法)
查看>>
第三章:队列及其应用之一---输出杨辉三角
查看>>
Winform程序Chrome内核 WebBrowser 控件
查看>>
记一次高并发场景下.net监控程序数据上报的性能调优
查看>>
QT中Qtableview视图表格中点击表头进行排序
查看>>
Python Day23
查看>>
windows控制台(console)乱码
查看>>
[Android]通知栏与操作栏的高度-State Bar & Navigation Bar
查看>>
第三次作业
查看>>
关于NX Check_Mate功能外部开发心得
查看>>
复制虚拟机vmware centos搭建集群节点过程中网络配置eth0和eth1遇到的问题以及NAT模式下虚拟机静态IP配置方法...
查看>>
mysql_数据库_操作
查看>>
SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
查看>>
AngularJS入门之动画
查看>>
获取子元素在父元素中的下标
查看>>
TextBox 绑定到DataTable某一列属性上
查看>>
背包九讲
查看>>
android 学习资源网址
查看>>