Trouble with Floated Elements and bottom border

Question

In my main element I have ten images wrapped in anchor tags, all of which are contained in a figure element within the main. I've added my border like so:

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; 
}

This actually works for all the images however, the fourth child (or img) in the first row, the top right image in the stack to be exact , when moused over shows its bottom border but also pushes the entire row of images below it down by 1px. Why is that img such a anarchist, a bit new to this.

Answer 1

You're probably trying to achieve something like this:

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;

}

Notice I added a transparent border-bottom to the image elements in their default state. This occupies the space of the 1px border without it being seen. Then when the user hovers over any given image, the color changes from transparent to #666 with no apparent jumping around. With the code you originally posted, a 1px border-bottom was being created on hover, shifting other elements around in the process.