最近在學習前端開發，所以希望記錄一些關於自己寫頁面中遇到的問題的記錄。可以幫助自己更好的記憶，當然如果能幫助到有同樣問題的小夥伴，就更好了。因爲白天上班，有點忙，所以學習筆記等到有時間會一一補上來。
話不多說，下面先描述一下我遇到的問題：
貼上代碼：
<style> .box1{ width: 100px; background-color: pink; } .box2{ width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <div class="box1"> <img src="../1.jpg"> </div> <div class="box2"> </div> </body>
操作步驟如下：
①先在頁面上添加一個粉色的寬爲100px的盒子，和一個寬高各爲100px的藍色盒子。
②在粉色盒子裏面放置一張漂亮的星空圖片，用圖片的高度撐起粉色盒子的高度。
③在瀏覽器打開我們的頁面，理想狀態應該是圖片完全蓋住粉色盒子，跟下方的藍色盒子無縫貼合。
④可是頁面上展示出來的圖片和藍色盒子之間，居然還有幾像素的間距（標題說的3像素只是一個大概值）。
⑤因爲這個間距是粉色的，說明是第一個盒子的高度，並沒有跟他裏面的圖片高度保持一致，比它裏面放置的圖片的高度還高。
我相信我上面的描述已經足夠清晰了，這個問題就是著名的img標籤3像素問題。
解決方法有很多:
1.img標籤增加vertical-align:top(只要不是baseline都可以）
img{ vertical-align: top; }
2.img標籤的父標籤增加font-size:0;
body{
font-size: 0; }
3.img標籤增加display:block;
img{ display: block; }
解決後的頁面展示：
