An empty space inside a div that is not margin or padding

Question

There is a div, and an image inside that div, all margin set to 0 - however it keep showing a gab INSIDE the div, not even out side, it's not padding or margins and I can't seem to figure out what it is.

I have tried to change the Div's to sections, give them negative margins, make the height 100% but nothing works!

Here is the link to the site: http://www.webdesignstudents.co.uk/students/loai_shehadeh/1/portfolio.html You can see the full code by View the Page Source, but here is the HTML I am using is this:

        <div class="wrapperB">
            <div class="content">
                <div id="portfolio-sectionB" class="all">
                    <div id="grid1"><!--Gird 1-->   

                        <div class="galleryItemB visualIdentity">
                            <img alt="Brighton and Hove In Bloom Logo" src="portfolio/images/brighton-in-bloom-logo-mockup-1.jpg">
                            <a href="portfolio/brighton-in-bloom.html"></a>
                        </div>  

                        <div class="galleryItemB visualIdentity">
                            <img alt="" src="portfolio/images/hovecollege-course-magazine-mockup2.jpg">
                            <a href="portfolio/hovecollege-course-magazine.html"><p>Click To View Project</p></a>
                        </div>  

                        <div class="galleryItemB visualIdentity">
                            <img alt="" src="portfolio/images/brighton-pet-show-poster-mockup3.jpg">
                            <a href="portfolio/brighton-pet-show.html"><p>Click To View Project</p></a>
                        </div>  

                        </div><div id="grid2"><!--Gird 2--> 

                        <div class="galleryItemB visualIdentity">
                            <img alt="" src="portfolio/images/ambition-world-bussiness-card-mockup.jpg">
                            <a href="portfolio/ambition-world.html"><p>Click To View Project</p></a>
                        </div>  

                        </div><div id="grid3"><!--Gird 3--> 

                        <div class="galleryItemB visualIdentity">
                            <img alt="" src="portfolio/images/brighton-pet-show-logo-mockup.jpg">
                            <a href="portfolio/brighton-pet-show.html"><p>Click To View Project</p></a>
                        </div>  

                        <div class="galleryItemB webDesign visualIdentity">
                            <img alt="" src="portfolio/images/animal-recuse-group-logo-mockup.jpg">
                            <a href="portfolio/animal-rescue-group.html"><p>Click To View Project</p></a>
                        </div>  

                        </div>                      
                    </div>      
                </div>
            </div>

The CSS

         #portfolio-sectionA {
         margin: 10px 20px;
              }

      #portfolio-sectionA a {
    color: #CED9E7;
    padding: 7px 10px;
    margin-left: -1px;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#portfolio-sectionA a:hover {
    color: #9BAFCE;
}

#portfolio-sectionA a:active, #portfolio-sectionA a.portfolio-sectionAClicked {
    color: #4E6C98;
    background-color: #3C5476;  
    cursor: default;
}

  /*---Portoflio Page Section B---*/
        .galleryItemB {
background-color: green;
position: relative;

         }

#portfolio-sectionB .galleryItemB a {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: url(../elements/magnifying-glass.png) center center no-repeat rgba(78,108,152,.85);
    cursor: pointer;

    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter:alpha(opacity=0);

    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

#portfolio-sectionB .galleryItemB:hover a {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter:alpha(opacity=100);
}

#portfolio-sectionB .galleryItemB a p{
    color: #FFFFFF;
    position: absolute; bottom: 15px; right: 20px;
    cursor: pointer;
}

Answer 1

Change the styling on the images within the div's to display:block.

Ex:

itemWrapper > img {
    display:block;
}

Answer 2

img is inline-lbock element and a is inline element. Hence simple text whitespaces appear between them.

Answer 3

In your CSS file you add paddings, margins and borders and stuff. Then you have an use all classess in your html file.

This might be one of the divs that causes the problem. You added the padding and other offsets by including all classes, it includes all css classes.

In your css class you have an #portfolio-sectionB part with offsets.

If you really don't know what it is you could always comment out all the CSS properties in the CSS file and enable them one by one while checking if the bug returns.

And fix the spelling mistakes in your html comments: change Gird into Grid.

Answer 4

I'm not sure if this is what you mean but it seems that the links itself have a padding. This results in a white border around the images.