eliminando espacio entre divisiones verticales

Question

tengo tres divisores alineados verticales uno encima del otro. la parte superior e inferior solo se muestra una imagen en la parte superior e inferior de la coordinación jugador .hence se vuelve como este

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

ahora hay línea blanca/div espacio entre el medio en su parte superior e inferior. Sin embargo, establecí explícitamente los márgenes y pendientes y bordes a cero, pero aún no hay solución.

Este problema no ocurre en IE6/IE7/IE8, etc., sino en todos los demás navegadores.

Gracias Bobince, está trabajando en la parte superior de la imagen haciendo vertical-alinear: inferior, pero no funciona para la imagen inferior. a quien trato de colocar encima

bien aquí es el código de detalle

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

:) ahora su trabajo en todos excepto IE del lol, después de instalar la línea de altura

Answer 1

Una imagen se encuentra en la línea base del texto de una caja de línea . Agregue texto a la izquierda y derecha de su imagen para verificar esto. Hay espacio debajo de la línea de base de texto para dejar espacio para los descendientes de letras ('g', 'y', etc.), así como para el espaciado entre líneas.

Establezca el estilo CSS de la imagen 'vertical-alinear' a algo como 'superior' o 'inferior' (según corresponda) para alinearlo con el borde de una línea de texto en lugar de la línea de base.

Answer 2

Simplemente configure la propiedad line-height de sus divisiones superiores e inferiores como 0.

código Ejemplo:

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

le puede dar la imagen display: block. Alternativamente, puede seguir la imagen con <br/> o envolverla en un div (asegúrese de que no haya espacio en blanco). En este caso, preferiría usar display: block a menos que necesite poner 2 imágenes juntas por alguna razón.

Answer 4

Si funciona en todos excepto en IE, hay un error de IE que ocurre si hay espacios en blanco después de una etiqueta de imagen. Prueba esto:

<div> 
    <img /></div> 

en lugar de esto:

<div> 
    <img /> 
</div>