cboxElement가 해당 이미지/버튼을 호출하는 높이보다 큰 이유는 무엇입니까?

Question

나는 Susy로 빌드 된 9 개의 이미지의 3x3 매트릭스를 가지고있다. 나는 왜 수직 거터가 내가 제안한 것처럼 행동하지 않는지 궁금했다. 그럼 난 cboxElement 포함 https://dl.dropbox.com/u/8578/cbox.png

가 포함 된 이미지보다 더 큰 것을 깨달았다 : https://dl.dropbox.com/u/8578/img.png

그러나 정직하게 cboxElement 이미지가 확장보다 크게 늘어 내가 왜이 생각을 많이하지 않아도됩니다! (Cbox)을위한 구성은 다음과 같습니다

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

: 적용된 CSS 그렇게 보이는

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

:

$(".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 
     });}   
    }); 

가 정렬되지 않은 목록 내에서 하나 개의 리튬의 HTML 그렇게 보이는

누구나 아이디어가 있습니까? 감사합니다

Answer 1

여기에 영향을 미치지 않으므로이 방정식에서 colorbox를 제거 할 수 있습니다. 이것은 CSS 퀴즈 일 뿐이며 인라인 요소로 인해 모든 이미지 요소에서 기본적으로 발생합니다. 이미지 요소를 display:block으로 변경하거나 float을 지정하면 해당 공간이 사라집니다.

그 공간이 이유에 관해서는

,이 게시물은 잘 설명 : Remove white space below image