图像后的空白答案

【问题标题】：whitespace after image图像后的空白
【发布时间】：2012-11-26 19:27:31
【问题描述】：

我正在学习如何使用 CSS。目前，我正在尝试了解 CSS 定位。我为每个 div 部分使用不同的背景颜色，因此我知道当我进行代码更改时页面的哪个区域会受到影响。

我现在正在处理我的标题页，偶然发现了一件我不明白的事情。我有一个徽标并将其放在自己的 div 中。我可以看到的问题，在徽标下方有一个空格（我为 div 使用粉红色背景颜色），我无法摆脱它。所以下面是我使用的代码和当前标题的截图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Print Repair Form</title>
  <style type="text/css">
    * {
      margin:0;
      padding:0;
      font: 12px/1.5 Georgia, serif;
    }

    #page-wrap {
      width: 800px;
      margin: 0 auto;
    }

    #header {
      background-color:#88d;
      overflow: auto;
    }

    #logo {
      float:left;
      background-color: #ffccff;
    }

    #logo a img {
      border:none;
    }

    #address-container {
      display: table;
      float: left;
      width: 164px;
      background-color: #FC730A;
      height: 104px;
    }

    #address-content{
      display:table-cell;
      vertical-align: middle;
    }

    #repair-header {
      background-color:#d4d4d4;
      float:left;
      width:380px;
    }

    #customer-info {
      float: left;
      width:220px;
      background-color: #ffff99;
    }

    #wo-info {
      background-color: #99ff99;
    }

    #content {
      clear:both;
      background-color:#33d;
    }
  </style>
</head>
<body>
  <div id="page-wrap">
    <div id="header">
      <div id="logo">
        <a href="/fms/"><img src="/fms/images/windows8-cropped.jpg" /></a>
      </div> <!-- div logo -->
      <div id="address-container">
        <div id="address-content">
          456 Some Addresses <br />
          The City, XP 444411 <br />
          1-800-000-0000 <br />
          www.someaddress.com
        </div>
      </div>
      <div id="repair-header">
        <p>Repair Detail</p>
      </div>
      <div id="customer-info">
        <p>12345678</p>
        <p>Facility Name</p>
      </div>
      <div id="wo-info">
        <p>WO: 12345789</p>
      </div>
    </div> <!-- div header -->
    <div id="content">
      <p>Content is here</p>
    </div>
  </div> <!-- div page-wrap -->
</body>
</html>

【问题讨论】：

标签： css

【解决方案1】：

添加属性

line-height: 0;

到您的徽标 div

#logo {
  float:left;
  background-color: #ffccff;
  line-height: 0;
}

并将您的图像 css 修改为：

#logo a img {
  border:none;
  vertical-align:bottom;
}

【讨论】：

我添加了该代码，但仍然无法正常工作。我使用 IE9 和 Firefox 16.0.2 查看网页
你说得对，我只是修改了我的答案并在 IE9 中进行了测试。作品。在挠了一阵头之后，我从这里得到了关于底部对齐的答案。 askthecssguy.com/articles/…
我最终使用了 display: block inside #logo a img。使用 vertical-align:bottom 会弄乱我的其他 div。