margin的BUG

在进行简单的div盒子嵌套时,发现设置margin-top时存在bug,然后就去谷歌搜索了一下,发现margin确实存在bug.

bug的现象是父子元素嵌套时,如果子元素是块元素时,对块元素设置margin-top ,如果父元素没有边框,那么margin-top会作用在父元素上.

下面是body里的代码:

<div class="red">
    <div class="black"></div>
 </div>

style里的代码:

<style>
  .red{
    background: red;
    width: 200px;height: 200px;
  }
.black{
    background: black;
    width: 100px;  height: 100px;
    margin-left: 50px;
    margin-top: 50px;
   }
</style>

像上面这样,black里的margin-top不会作用在black上,而是作用在red上.

通过测试发现,当给父级元素添加边框的时候可以消除该bug,但是添加边框会影响盒子的大小,如果使用的话需要重新计算盒子各部分的大小,不实用.当给父级元素添加over-flow:hidden时也可以消除该bug,使其正常作用在black子级元素上.还有一个方法是将当前black元素改变成内联块级元素,但是在特殊情况下会影响页面的布局,不推荐使用.这就是在简单基础上的解决办法,毕竟是初学,无法用更高深的知识技术来解决,期待以后学会更高级的解决办法.

下面是使用overflow:hidden;实现的解决办法:

 <style>
   .red{
     background: red;
     width: 200px;height: 200px;
     /*overflow: hidden;*/
   }
   .black{
     background: black;
     width: 100px;  height: 100px;
     margin-left: 50px;
     margin-top: 50px;
   }
   </style>
 </head>
 <body>
   <div class="red">
     <div class="black"></div>
   </div>
 </body>

另外两个方法就不示范了.

初学html,请各位多多指教.

时间: 06-17

margin的BUG的相关文章

margin 相关 bug 系列

原文地址:margin系列之bug巡演 by @doyoe IE6浮动双倍margin bug 这当是IE6最为经典的bug之一. 触发方式 元素被设置浮动 元素在与浮动一致的方向上设置margin值 来看看详细的代码吧: HTML <div id="demo"> <p>IE6下浮动方向上的margin值将会双倍于其指定值</p> </div> CSS #demo { overflow: hidden; width: 400px; mar

CSS系列-margin的BUG

1. 塌陷现象(子元素设置margin-top, 父元素会塌陷) 下面例子,此时子元素其实和父元素的距离是0,离父元素的兄弟节点才是100px 触发父元素的bfc, overflow: hidden, border : 解决方案1:父元素设置透明的 border:  1px solid transparent;  box-sizing: border-box; 解决方案2:父元素设置 overflow: hidden; 解决方案3:父元素设置 display: inline-block; wid

关于margin的浏览器BUG

常见的浏览器下margin出现的bug 林林总总写了那么多,最后总结一些浏览器中常见的margin Bug吧,以后遇到margin下的布局问题可以查看这里找到解决的方案,如果你还发现其他关于浏览器下margin的Bug你可以发表留言,核对采纳后我会及时添加进去,感谢你的分享: IE6中双边距Bug: 发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍. 解决方法:是给浮动元素加上di

padding和margin的区别,以及其存在的bug和消除方法!

margin是盒模型的外边距,padding是盒模型的内边距: 用margin时,最好给父级元素加上overflow:hidden:(溢出隐藏) 用padding时,最好给自身加上box-sizing:border-box:(固定边框) margin的bug: 1. IE6中浮动元素3px间隔Bug: 发生场合:发生在一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug. 解决方法:右边元素也一起浮动;或者为右边元素添加IE6 Hack _margin-left:-3px;从

不要告诉我你懂margin

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?-- 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性定

前端BUG总结

关于margin的BUG,参考http://www.poluoluo.com/jzxy/201206/167007.html IE6中双边距Bug:发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍.解决方法:是给浮动元素加上display:inline;CSS属性:或者用padding-left代替margin-left. 原理分析:块级对象默认的display属性值是block,

关于那些常见的坑爹的小bug(会持续更新)

当我学了矩阵分析的时候我知道什么是麻烦,当我学了傅里叶级数的时候我知道什么是相当麻烦.然而,当我刚刚接触前端,我才明白什么叫做坑爹的ie6.这个分享对于经验丰富的前端基本都遇过.对于刚入行的新手,或许可以起到一点点的指导作用.不求救万人于水火,但求某日能帮到路过的你. 在说bug之前,先看看各大浏览器最近的份额 有这个百度的浏览器份额可以看出ie6的末日渐行渐近了. 但是中国盗版的xp系统用户还不在少数,所以ie6在短期内不会消失.下面就说一下以ie6为首的一些奇葩而又常见的bug. 1.IE6

浏览器bug和修复

与许多编程语言相比,CSS是一种相当容易学习的语言,它的语法简单明了,而且由于它的表现本质,开发人员并不需要处理复杂的逻辑.但是在不同的浏览器上测试代码才是真正困难的开始,你的设计在一种浏览器上表现的良好,但是在另外一个浏览器上就会变得“支离破碎”. “CSS难以掌握”的误解并非来自于语言本身,而是由于为了让站点在所有主流浏览器上工作正常需要采取很多的措施.关于bug的信息很难找到,缺乏文档记录,因此bug常常被误解.许多人把招数看做魔法子弹,认为它们就像神秘的咒语一样,当应用在代码中时,就会神

_margin和margin的区别

*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; } /* HEAD