Question

所以我试图建立一个网站，我希望绿色导航栏与图像的底部齐平。但是，无论我对源代码和css做了什么改变，它仍然留下了空间。有谁知道如何解决这个问题？

HTML：

<body>
  <img src="xyz.gif">
  <div class="hasbackground">
     ...
  </div>
</body>

CSS：

.hasbackground { background-color: blue; }

这是JSFiddle的一个例子：http://jsfiddle.net/a1mn0ytz/

由于

Answer 1

您的图片为display: inline，但必须为display: block。 inline或inline-block元素将空格视为内联（例如，这些单词之间的空格。）有时可以垂直显示。

Answer 2

删除图像上的2像素边框。

更改

<img width="946" height="246" style="border:2px solid #000000" alt="dogwash" src="Banner.jpg">

到

<img width="946" height="246" alt="dogwash" src="Banner.jpg">

Answer 3

图像属性的边框如下：

border: 2px solid #000000;

将其更改为以下内容：

border-left: 2px solid #000000;
border-right: 2px solid #000000;