已經好久沒用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