Html 删除垂直div之间的空间_Html_Css

Html 删除垂直div之间的空间

html css

Html 删除垂直div之间的空间,html,css,Html,Css,我有三个垂直对齐的div在彼此的顶部。顶部和底部只是在玩家的顶部和底部显示一个图像。因此协调变成这样 <div> <img>top</img> <div> <div> <div></div> <div></div> <div></div> </div> <div> <img>bottom</img> &

我有三个垂直对齐的div在彼此的顶部。顶部和底部只是在玩家的顶部和底部显示一个图像。因此协调变成这样

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


？flvfile=
&；lang=e&；环境=产品
*包括主音高中的所有匹配，以及音高2中的选定匹配-有关详细信息，请参阅常见问题解答
**包括决赛日的所有比赛，3月7日从主球场开始-详情见常见问题解答
***主球场上的所有比赛都将直播，第二球场上的比赛将按需进行-详情请参见常见问题解答
功能showMovie（播放器、电影、endthumb、目的地）{
var so=新的SWFObject（播放器+'？flvfile='+电影+'、endthumb='+endthumb+'和endlink='+目的地、'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'）；
}
放映电影
','
','
','
');

：）现在，除了IE的lol，它在所有情况下都能工作，在设置行高后，

一个图像位于内联框的文本基线上。在图像的左侧和右侧添加文本以验证这一点。文本基线下方有空格，以便为字母的下半部分（“g”、“y”等）以及行距留出空间

将图像的CSS样式“垂直对齐”设置为“顶部”或“底部”（视情况而定），使其与文本行的边缘对齐，而不是与基线对齐。

只需将顶部和底部div的

行高属性设置为0

示例代码：
<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>


试验
#顶{
背景色：#f00；
线高：0px；
}
#中间的{
背景色：#0f0；
}
#底部{
背景色：#00f；
线高：0px；
}
这是第一个中间组的孩子。
这是第二个中间分区的孩子。
这是第三个中间分区的孩子。

您可以给图像显示：block
。或者，您可以使用
跟随图像，或者将其包装在div中（确保没有空白）。在这种情况下，除非出于某种原因需要将两个图像放在一起，否则我更愿意使用display:block
。
如果它在除IE之外的所有应用程序中都有效，那么如果图像标记后有空格，就会出现IE错误。试试这个：
<!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>



与此相反：
<div>
    <img /></div>


您能发布您的代码以便我们查看吗？如果您包含复制您的问题的示例HTML和CSS，将更容易提供帮助；添加了要修复的代码块。实际上，这是XSLT转换，所以粘贴代码需要发布很多东西，所以我只是尽可能地放置。但是我会看看我能不能写更多你能回答吗？你能回答吗？
<div>
    <img />
</div>