浮動元素和底部邊界的問題

Question

在我的主要元素中，我有10個圖像包裹在錨點標記中，所有這些圖像都包含在主要圖元中。 我已經添加了我的境界，像這樣：

main img { 

    width:100px; 
    height:100px; 
    float:left; 
    display: block; 
    padding:20px 75px 55px; 
} 

main img:hover { 

    border-bottom:1px solid #666; 
    margin-bottom:-1px; 
} 

這實際工作的第一行中的所有圖像。然而，第四個孩子（或圖片），在堆棧頂部右側圖像準確的說，當模糊顯示其底部邊界，但也推動整個圖像下方1px的圖像。 爲什麼img這樣的無政府主義者，這個有點新鮮。

Answer 1

你可能想實現這樣的事情：

main img { 

    width:100px; 
    height:100px; 
    float:left; 
    display: block; 
    padding:20px 75px 55px; 
    border-bottom:1px solid transparent; 

} 

main img:hover { 

    border-bottom:1px solid #666; 

} 

通知我增加了一個透明邊框，底部在其默認狀態下的圖像元素。這佔據了1px邊框的空間而沒有被看到。然後，當用戶懸停在任何給定的圖像上時，顏色從透明變爲＃666，沒有明顯的跳躍。通過您最初發布的代碼，懸停時將創建一個1px邊框底部的，並在此過程中移動其他元素。