zoukankan      html  css  js  c++  java
  • 子元素margin-top使得父元素下移

    一、为什么会出现这种情况

    规范这样说,我也没办法……

       1、所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。
    毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
       2、一个盒子如果没有上补白(padding-top)和上边框(border-top),
    那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

       3、父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.

    就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。

    二、出现这种情况的解决方案  

        1、在父级中加入一个空的div放在第一个儿子节点上

        2、父级进行设置padding-top:1px,border-top:1px,来辖制第一个子节点

        3、父级设置overflow:hidden属性(超出的部分被隐藏起来了,这就是所谓的溢出隐藏属性)

  • 相关阅读:
    pytest框架
    Zabbix第九章(zabbix自定义item)
    Zabbix第七章(Zabbix监控本地)
    Zabbix第五章(配置zabbix的语言)
    Zabbix第四章(zabbix-server安装)
    Zabbix第二章(下载)
    Zabbix第一章(简介)
    线性筛
    Eratosthenes筛法
    质数判定
  • 原文地址:https://www.cnblogs.com/liumengdie/p/8206461.html
Copyright © 2011-2022 走看看