Why the cboxElement is larger in height than the image/button which is calling it?

Question

I have a 3x3 matrix of 9 images built with Susy. I only wondered why the vertical gutter isn't behaving like i suggested. Then i realized that the containing cboxElement https://dl.dropbox.com/u/8578/cbox.png

is larger than the contained image: https://dl.dropbox.com/u/8578/img.png

But honestly i don't have much of an idea why the cboxElement is stretched larger than the image extends?! The configuration for the cbox looks like that:

    $(".ajax1, .ajax2, .ajax3, .ajax4, .ajax5, .ajax6, .ajax7, .ajax8, .ajax9").colorbox({
        rel:"nofollow",
        transition:"none", 
        opacity:"0",  
        fixed:"true", 
        width:"65%", 
        height:"97%",
        onComplete: function() {$('.flexslider').flexslider({
            animation: "slide",
            animationLoop: true,
            controlNav: false,
            directionNav: true,
            slideshow: false
        });}        
     });

The html of one li within the unordered list looks that way:

 <li><a class="ajax1" href="projekt1.html"><img title="Projekte1" src="img/projekteblur.jpg" alt="Projekte1" /><img title="Projekte1" src="img/projekte.jpg" alt="Projekte1" /><span class="spiceup">Zum Projekt</span></a></li>

The applied CSS looks that way:

 /* The following CSS is consistent between example themes and should not be altered. */
#colorbox, #cboxOverlay, #cboxWrapper{
    position:absolute;
    top:0;
    left:0;
    z-index:300;
    overflow:hidden;
    }
 #cboxOverlay{
    position:fixed;
    width:100%;
    height:100%;}
  #cboxMiddleLeft, #cboxBottomLeft{
    clear:left;}
  #cboxContent{
    position:relative;}
  #cboxLoadedContent{
    overflow:auto;}
  #cboxLoadingOverlay, #cboxLoadingGraphic{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;}
  #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
    cursor:pointer;}
  #colorbox, #cboxContent, #cboxLoadedContent{
    box-sizing:content-box;}

/*  User Style:   */

#colorbox{
    @include border-radius(5px, 5px);
    @include box-shadow(black 2px 2px 10px);
    background:rgba(55, 60, 74, 0.95);
    }
 #cboxContent{
    margin:30px;
    overflow:visible;
    }
  #cboxError{
        padding:50px;
        border:1px solid #ccc;}
  #cboxLoadedContent{
        padding:0 5px 0 10px;
        }
    #cboxLoadingGraphic{
        background:url('../img/loading.gif') no-repeat center center;}
    #cboxLoadingOverlay{
        background:rgba(55, 60, 74, 0.95);}

   #cboxClose{
    text-indent:-9999px;
    width:44px;
    height:24px;
    position:absolute; 
    top:-26px;
    right:-20px; 
    background:url('../img/close.png') no-repeat 0 0;}

Anyone has an idea? Thanks

Answer 1

You can remove colorbox from this equation, as it has no impact here. This is just CSS trivia, and happens with all image elements by default due to them being inline elements. If you were to change the image element to display:block or give it a float, that space would disappear.

As for the reason that space is there, this post explains it well: Remove white space below image