Css 图像后的空白_Css - Fatal编程技术网

Css 图像后的空白

css

Css 图像后的空白,css,Css,我正在学习如何使用CSS。目前，我正在努力学习CSS定位。我为每个div部分使用不同的背景色，所以我知道当我修改代码时，页面的哪个区域会受到影响我现在正在我的首页上工作，偶然发现了一件我不明白的事情。我有一个徽标，并把它放在自己的div中。我可以看到的问题是，徽标下面有一个空白（我使用粉色作为div的背景色），我无法摆脱它。下面是我使用的代码和当前标题的屏幕截图 <!DOCTYPE html> <html lang="en"> <head> <

我正在学习如何使用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>


打印维修单
* {
保证金：0；
填充：0；
字体：12px/1.5格鲁吉亚，衬线；
}
#换页{
宽度：800px；
保证金：0自动；
}
#标题{
背景色：#88d；
溢出：自动；
}
#标志{
浮动：左；
背景色：#ffccff；
}
#标志a img{
边界：无；
}
#地址容器{
显示：表格；
浮动：左；
宽度：164px；
背景色：#FC730A；
高度：104px；
}
#地址内容{
显示：表格单元格；
垂直对齐：中间对齐；
}
#修理总管{
背景色：#D4；
浮动：左；
宽度：380px；
}
#客户信息{
浮动：左；
宽度：220px；
背景色：#ffff99；
}
#工单信息{
背景色：#99ff99；
}
#内容{
明确：两者皆有；
背景色：#33d；
}
456一些地址

城市，XP 444411

1-800-000-0000

www.someaddress.com
修理细节
12345678
设施名称
WO:12345789
内容在这里

添加属性

line-height: 0;

到你的logo 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中进行了测试。作品在搔了一会儿脑袋之后，我从这里得到了关于底部对齐的答案。最后我使用了display:block-inside#logo-a img。使用垂直对齐：底部会弄乱我的其他div。