수직 div 사이의 공백을 제거

Question

나는 세 개의 수직으로 정렬 된 div가 서로 위에 있습니다. 상단과 하단이 바로 플레이어 .hence 조정의 상단과 하단에 이미지를 보여주고있다 이제 상단과 하단에있는 중간 사업부 사이의 흰색 라인/공간이이

<div> 
<img>top</img> 
<div> 
<div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div> 
<img>bottom</img> 
</div> 

처럼된다. 그러나 나는 명시 적으로 여백과 보류 및 경계를 0으로 설정했지만 아직 해결 방법은 없습니다.

이 문제는 IE6/IE7/IE8 등에서 발생하는 것이 아니라 다른 모든 브라우저에서 발생합니다.

감사합니다. bobince는 vertical-align : bottom을 작성하여 상단 이미지 측면에서 작업하지만 bottom 이미지에서는 작동하지 않습니다. 내가 위에 놓으려고 노력하는 사람. 여기에 확인

은 상세 코드

<div id="top" > 
    <img alt="topimage" style="vertical-align:bottom"> 
     <xsl:attribute name="src"> 
     <xsl:value-of select="TopImage"/> 
     </xsl:attribute> 
    </img> 
    </div> 
    <div id="container" style="clear:both;display:block;margin: 0 0 0 0;padding: 0 0 0 0;text-align:left;border:0 none;"> 
    <div id="left" style="margin: 0 0 0 0;padding: 0 0 0 0;float: left;"> 
     <img alt="left image" style="margin: 0 0 0 0;padding: 0 0 0 0;vertical-align:bottom"> 
     <xsl:attribute name="src"> 
      <xsl:value-of select="LeftImage"/> 
     </xsl:attribute> 
     </img> 
    </div> 

    <div id="flashde260252-c874-4c67-b1aa-64ebe80bb701" style="margin: 0 0 0 0;padding: 0 0 0 0;float:left;border:0;vertical-align:bottom"> 
     <embed id="flashde260252-c874-4c67-b1aa-64ebe80bb7010" height="308" width="512" allowfullscreen="true" wmode="transparent" quality="high" bgcolor="#ffffff" name="flashde260252-c874-4c67-b1aa-64ebe80bb7010" style="margin: 0 0 0 0;padding: 0 0 0 0;" type="application/x-shockwave-flash"> 
     <xsl:attribute name="src"> 
      <xsl:value-of select="Movie"/> 
      <xsl:text>?flvfile=</xsl:text> 
      <xsl:value-of select ="Destination"/> 
      <xsl:text >&amp;lang=e&amp;environment=PROD</xsl:text> 
     </xsl:attribute> 
     </embed> 
    </div> 

    <div id="rightimage" style="margin: 0 0 0 0;padding: 0 0 0 0;float:left;"> 
     <img alt="rightimage" style="vertical-align:bottom"> 
     <xsl:attribute name="src"> 
      <xsl:value-of select="RightImage"/> 
     </xsl:attribute> 
     </img> 
    </div> 
    </div> 
    <!-- <div id="bcontainer" style="margin: 0 0 0 0;padding: 0 0 0 0;text-align:left;border-left:0;border-right:0;border-top:0;border-bottom:0px;border:none;">--> 
    <div id="bottom" style="clear:both;display:block;margin: 0 0 0 0;padding: 0 0 0 0;vertical-align:top;text-align:left;border:0 none"> 
    <img alt="subscribe" src="IRBBottom.jpg" usemap="#promomap" border="0" style="vertical-align:top"> 
     <xsl:attribute name="src"> 
     <xsl:value-of select="BottomImage"/> 
     </xsl:attribute> 
    </img> 
    </div> 
    <!-- </div> --> 
    <div id="toc" style="clear:both;display:block;text-align:left;"> 
    <ol style="list-style:none;font-size:small;font-weight:bold"> 
     <li>* Includes all matches from main pitch, plus selected matches from pitch 2 - see FAQ for details.</li> 
     <li>** Includes all matches on Finals Day, March 7th from main pitch - see FAQ for details.</li> 
     <li>*** All matches on main pitch will be live and matches on pitch 2 will be on demand - see FAQ for details.</li> 
    </ol> 
    </div> 
    <map name="promomap"> 
    <area shape="rect" coords="229,46,350,137" href="index.html" alt="Subscribe or Login" title="Subscribe or Login"/> 
    <area shape="rect" coords="410,47,528,137" href="XXX.html" alt="R Video" title="Ro"/> 
    </map> 
    <script type="text/javascript"> 
    <xsl:text disable-output-escaping="yes"> 
    function showMovie(player,movie,endthumb,destination){ 
    var so = new SWFObject(player+'?flvfile='+movie+'&amp;endthumb='+endthumb +'&amp;endlink='+destination,'flashde260252-c874-4c67-b1aa-64ebe80bb7010','512','308','8', '#ffffff', 'high',''); 
    so.addParam('wmode', 'transparent');so.addParam('allowfullscreen', 'true');so.write('flashde260252-c874-4c67-b1aa-64ebe80bb701'); 
    } 
    </xsl:text> 
    <xsl:text> showMovie('</xsl:text> 
    <xsl:value-of select="Player"/> 
    <xsl:text>','</xsl:text> 
    <xsl:value-of select="Movie"></xsl:value-of> 
    <xsl:text>','</xsl:text> 
    <xsl:value-of select="EndThumb"/> 
    <xsl:text>','</xsl:text> 
    <xsl:value-of select="Destination"/> 
    <xsl:text>');</xsl:text> 
    </script> 
</div> 

입니다 :) 지금은이 이미지가 인라인 상자의 텍스트베이스 라인에 앉아 선 높이

Answer 1

을 설정 한 후, 모든 IE의 롤을 제외하고의 작업 . 이를 확인하기 위해 이미지의 왼쪽과 오른쪽에 텍스트를 추가하십시오. 문자 기준선 아래에는 문자의 디 센더 ('g', 'y'등) 및 줄 간격을위한 공간이 있습니다.

이미지의 CSS 스타일 '세로 맞춤'을 '위쪽'또는 '아래'(적절할 경우)로 설정하여 기준선 대신 텍스트 줄의 가장자리에 맞 춥니 다.

Answer 2

상단 및 하단 div의 line-height 속성을 0으로 설정하기 만하면됩니다.

예제 코드 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <title>Test</title> 
    <style type="text/css"> 
     #top { 
      background-color: #f00; 
      line-height: 0px; 
     } 
     #middle { 
      background-color: #0f0; 
     } 
     #bottom { 
      background-color: #00f; 
      line-height: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="top"> 
     <img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" 
      alt="Stackoverflow" /> 
    </div> 
    <div id="middle"> 
     <div>This is the first middle div child.</div> 
     <div>This is the second middle div child.</div> 
     <div>This is the third middle div child.</div> 
    </div> 
    <div id="bottom"> 
     <img src="http://www.gravatar.com/avatar/ae3e50c947379163d74b6de6fa01d509?s=32&amp;d=identicon&amp;r=PG" 
      alt="Gripsoft avatar" /> 
    </div> 
</body> 

Answer 3

당신은 이미지 display: block를 제공 할 수 있습니다. 또는 이미지를 <br/>으로 따라 가거나 div에서 감쌀 수 있습니다 (공백이 없는지 확인하십시오). 이 경우 어떤 이유로 2 개의 이미지를 함께 넣어야하는 경우가 아니면 display: block을 사용하는 것을 선호합니다.

Answer 4

IE를 제외하고 모두 작동하는 경우 이미지 태그 뒤에 공백이 있으면 IE 버그가 발생합니다. 이 시도 : 대신의

<div> 
    <img /></div> 

을 :

<div> 
    <img /> 
</div>