html&css bug

标签：tab   strong   htm   add   ack   元素   splay   20px   height   

已经好久没用html,css,今天想借着这个博客把以前的遇到的这几个bug整理一下

1.a标签标签里面装img

大家都知道a标签是块状元素，所以说在a标签里面装img标签的时候，大家就是会改变a标签的属性display:inline-block或display:-block,以为这样就好了，可以看一下面的例子

可以清晰的看到图片与a标签之间有一点空隙，我是在谷歌中看的有3px的间隙。我当时觉得把它变成块状元素之后不就和div里面装图片一样吗，宽高由里面的图片决定。为什么有这个空隙，在网上看了好久都没找到理想的答案。

解决方法：就是是将里面的图片浮动，这个小空隙就没有了

2.margin bug

margin也是样式中比较常用的属性，但它也存在bug就用下面个例子来说

样式：

.box1{width: 100px;height: 100px;background: red;}
.box2{width: 100px;height: 100px;background: pink;}
.box3{margin-top: 20px;width: 100px;height: 80px;background: blue;}

html：

<div class="box1"></div>

<div class="box2">

　　<div class="box3">我只想和父亲保持间距</div>
</div>

代码上是要将box3的上边距和父元素box2上面保持距离，然而这个上边距却作用在了box1和box2了，这个上边距明明给在了box3结果却和box没的半毛钱的关系，记得当时我也为这个box3 打抱不平了好久，是在是没找到是什么原因。

问题的解决方法：这个我其实不没有什么根本上的解决方法，只有一个避免方法，像这样的父子盒子你想子盒子上边距的话，就将父盒子变成内容盒子然后给它内边距（ box-sizing: border-box;padding-top: 30px;）

html&css bug

标签：tab   strong   htm   add   ack   元素   splay   20px   height   

原文地址：https://www.cnblogs.com/lmw321/p/9069116.html