Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Strange ~2px White Area Underneath Of Images. Possible CSS Error?

Below I have included an image illustrating my issue. In summary, I am having an issue with an approximately 2 pixel whitespace below each of the images on my website. I'm not exactly sure what is causing this, but it is most definitely not the image itself. I believe it to be the box-sizing: border-box snippet in my CSS, due to the fact that 2px would be the sum of the top and bottom borders, however, removing that part of the code does not solve the issue. Any help or tips would be greatly appreciated. I have tried viewing the webpage on my mobile phone, using Firefox and using Chrome, and the issue is persistent between all of them.

Illustration of whitespace below images

The webpage in question can be found at http://www.bellasaluminum.com/gallery.php?jobType=GlassWindow&page=1, however, I have included a portion of the gallery's stylesheet below:

#gallery > div {
    border: 1px solid black;
    margin: 5px;
    width: auto;
}

#gallery > div > * {
    display: inline-block;
}

#gallery > div > img {
    position: relative;
    padding: 0px;
    margin: 0px;
}

#gallery > div > div.description {
    position: relative;
    padding: 3px;
    width: auto;
    vertical-align: top;
}

#galleryNav {
    padding: 0px;
    background-color: #dedede;
    text-align: center;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 1px solid black;
    width: 90%;
    margin: auto;
}

#galleryNav > a {
    text-decoration: none;
    color: black;
    font-family: Arial;
    font-weight: bold;
    display: inline-block;
    padding: 10px 8px 10px 8px;
    margin: 0px;
}

#galleryNav > a:hover {
    background-color: #efefef;
}

#galleryNav > a.active {
    background-color: #afafaf;
}
like image 828
Clucky Avatar asked Oct 20 '25 04:10

Clucky


1 Answers

You can either make the img elements block level:

#gallery > div > img {
    display:block;
}

or, change the vertical-align property value to something like top. (the default is baseline)

#gallery > div > img {
    vertical-align:top;
}

The second option (vertical-align:top) should be used in this instance, because you want the text to be inline with the img element.

like image 54
Josh Crozier Avatar answered Oct 21 '25 18:10

Josh Crozier



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!