zoukankan      html  css  js  c++  java
  • 为什么margin-top值不是作用域父元素

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="http://www.51texiao.cn/" />
    <title>XXX</title>
    <style type="text/css"> 
    #parent 
    { 
      200px; 
      height:200px; 
      background-color:red; 
    } 
    #children 
    { 
      60px; 
      height:60px; 
      background-color:green; 
      margin:0px auto; 
      margin-top:50px; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="parent"> 
      <div id="children"></div> 
    </div> 
    </body> 
    </html>
    

      以上代码的初衷是让子元素的顶部距离父元素50px,但是事实上却并没有实现预期的效果,而是子元素顶部紧贴父元素,并且margin-top好像转移给了父元素,让父元素产生上外边距。这其实是一个典型的外边距合并问题,但是并非所有的浏览器都会产生这种情况,一般标准浏览器都会出现此现象,而IE6和IE7在此状态下不会出现外边距合并现象。

    1.父元素的上边距与子元素的上边距之间没有border。

    2.父元素的上边距与子元素的上边距之间没有非空内容。

    3.父元素的上边距与子元素的上边距之间没有padding。

    3.父元素和子元素中没有设置定位属性(除static和relative)、overflow(除visible)和display:inline-block等。

    4.父元素或者资源都没有浮动。

    注意:以上条件必须都要满足才可以。那么解决此中情况的方式也很简单,只要破坏上面的一种情况就可以了。

    解决:

    1、给父级添加overflow:hidden;

    2、添加padding

    居敬持志~ Coding
  • 相关阅读:
    2013=730 胆子要大,敢想敢做
    2013=7=30 自增量的浅谈
    2013=7=29 nyist 13题
    2013=726 整合,优化,利用自身资源。 让自己的时间更有意义,最大化利用
    2013=7=22
    2013=7=23 超级阶梯
    机器人写诗项目——递归神经网络(RNN)
    和程序员在一起是怎样的体验
    和程序员在一起是怎样的体验
    人工智能数学基础——线性代数
  • 原文地址:https://www.cnblogs.com/ntscshen/p/4695285.html
Copyright © 2011-2022 走看看