두 개의 수직 div 사이에 공백이 있습니다.

Question

3 개의 div가 수직으로 겹쳐져 있습니다. 문제는 상단과 중앙 div 사이에 간격이 있다는 것입니다. 또한, 배경으로 사용 된 이미지는 이미지의 테두리 아래 부분이 사라짐에 따라 중앙 div의 하단에서 잘린 것처럼 보입니다 (이것은 평면 jpg이므로 그래픽 문제가 아닙니다). div와 그래픽은 모두 같은 높이이지만 div뿐만 아니라 divs (왼쪽 열)의 왼쪽 스택도 divs (오른쪽 열, 위에서 언급 한 것) 및 div의 스택 스택의 높이가 다릅니다. 내가 홈 페이지에서 의미하는 것을 볼 수있다. http://sunnahspace.com : 나는 웹상의 답변을 찾아 보았고, 정말로 압도적 인 ive는 line-height를 0으로 설정하려고 시도했는데 작동하지 않았다. 잘못되었으므로 아무것도 배제하지 마십시오. Heres는 일부 코드 :

<style type="text/css"> 
.body_titles { 
    padding: 20px; 
    font-family: GeosansLight; 
    font-size: 18px; 
    color: #FFF; 
    text-decoration: none; 
    width:600px; 
} 
.body_content { 
    padding: 20px; 
    font-family: GeosansLight; 
    font-size: 16px; 
    color: #333; 
    text-decoration: none; 
    overflow:hidden; 
    width:600px; 
} 
#column_left_container { 
    float:left; 
    width:640px; 
    height:946px; 
} 
#content_tab_top_left { 
    background-image:url(../img/container_top.jpg); 
    background-repeat:no-repeat; 
    height:335px; 
    width:640px; 
} 
#content_tab_center_left { 
    background-image:url(../img/container_center.jpg); 
    background-repeat:no-repeat; 
    height:311px; 
    width:640px; 
} 
#content_tab_bottom_left { 
    background-image:url(../img/container_btm.jpg); 
    background-repeat:no-repeat; 
    height:300px; 
    width:640px; 
} 
#column_right_container { 
    margin-left:20px; 
    float:right; 
    width:350px; 
    height:946px; 
} 
.body_titlesRIGHT { 
    padding: 20px; 
    font-family: GeosansLight; 
    font-size: 18px; 
    color: #FFF; 
    text-decoration: none; 
    width:350px; 
} 
.body_contentRIGHT { 
    padding: 20px; 
    font-family: GeosansLight; 
    font-size: 16px; 
    color: #333; 
    text-decoration: none; 
    overflow:hidden; 
    width:350px; 
} 
#content_tab_top_right { 
    background-image:url(../img/container_topright.jpg); 
    background-repeat:no-repeat; 
    height:335px; 
    width:350px; 
    margin-bottom:0px; 
} 
#content_tab_center_right { 
    background-image:url(../img/container_centerright.jpg); 
    background-repeat:no-repeat; 
    width:350px; 
    height:311px; 
    margin-top:0px; 
} 
#content_tab_bottom_right { 
    background-image:url(../img/container_btmright.jpg); 
    background-repeat:no-repeat; 
    width:350px; 
    height:300px; 
} 
</style> 
    <div id="column_left_container" style="display:inline-block"> 
     <div id="content_tab_top_left"> 
      <div class="body_titles"> 
      Title 
      </div> 
       <div class="body_content"> 
        Content 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Tests<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        <br /> 
       </div> 
       </div> 
    <div id="content_tab_center_left"> 
      <div class="body_titles"> 
      Title 
      </div> 
     <div class="body_content"> 
        Content 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Tests<br /> 
        Test<br /> 
      Test<br /> 
        Test<br /> 
       </div> 
    </div> 
    <div id="content_tab_bottom_left"> 
      <div class="body_titles"> 
      Title 
      </div> 
       <div class="body_content"> 
        Content 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Tests<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
      </div> 
     </div> 
    </div> 
     <div id="column_right_container" style="display:inline-block"> 
       <div id="content_tab_top_right"> 
        <div class="body_titlesRIGHT"> 
        Title 
        </div> 
       <div class="body_contentRIGHT"> 
        Content 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Tests<br /> 
        Test<br /> 
        Test 
        </div> 
     </div> 
      <div id="content_tab_center_right"> 
        <div class="body_titlesRIGHT"> 
        Title 
        </div> 
         <div class="body_contentRIGHT"> 
          Content 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Tests<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          <br /> 
          <br /> 
         </div> 
      <div id="content_tab_bottom_right"> 
        <div class="body_titlesRIGHT"> 
        Title 
        </div> 
         <div class="body_contentRIGHT"> 
          Content 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Tests<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

당신이 빠른 수정을 찾고 있다면, 당신의 #content_tab_top_right의 사업부는 333px의 높이를 가져야한다. 내 추측은 (편집자의 파일을 보지 않고) 배경 이미지 끝에 공백 2 픽셀이 있다는 것입니다.