zoukankan      html  css  js  c++  java
  • 关于外边距合并问题及解决方案

    提示:水平margin不会被合并,垂直margin会被合并!
    方法1:设置了的overflow属性的盒模型,则其与子元素之间的垂直margin不会合并,但其与父元素之间、与相邻元素之间的margin会合并。(overflow取值为visible除外)
     
    方法2:设置了float属性的盒模型,则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。
     
    方法3:设置了绝对定位position:absolute的盒模型,则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。(但应注意position:absolute对其后元素的position的影响)
     
    方法4:设置了display:inline-block的盒模型,则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。
     
          相邻元素的margin是否被折叠会影响元素的位置
     
          防止外边距合并解决方案:
     
          1.防止元素与子元素margin重叠:
     
          用内层元素的margin通过外层元素的padding代替;
     
          内层元素透明边框 border:20px solid transparent/父元素background-color;
     
          外层元素 overflow:hidden;/overflow:auto;
     
          2.防止元素与子元素、与父元素。与相邻元素的重合:
     
          设置元素绝对定位 postion:absolute;或float:left;或display:inline-block;
     
  • 相关阅读:
    ASP.NET MVC Core的ViewComponent
    docker学习笔记
    C#调用RabbitMQ实现消息队列(转)
    在Gerrit中修改project.config
    Linux设备模型:6、Bus
    Linux设备模型:5、device和device driver
    Linux设备模型:4、sysfs
    Linux设备模型:3、Uevent
    Linux设备模型:2、基本对象 Kobject、Kset、Ktype
    Linux设备模型:1、设计思想
  • 原文地址:https://www.cnblogs.com/gaoyangdev/p/12974781.html
Copyright © 2011-2022 走看看