图像下方不需要的间距

Question

我正在尝试在页面底部创建一个固定位置的页脚。但是在图像下方的间距和不需要的视点底部存在问题：

基本图片：

问题：

图像下方的填充是不需要的。

HTML ：

<div id="containerBarKonge">
    <ul>
        <li><img src="./kongelogo.png" /></li>
    </ul>
</div>

CSS ：

#containerBarKonge {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index:9999;
    padding: 0px;
    margin: 0px;
}

#containerBarKonge > ul {
    position: relative;
    list-style-type: none;
    padding: 0px;
    padding-left: 2px;
    margin: 0px 20px;
    min-width: 1053px;
    background-color: #900;
}
#containerBarKonge > ul * {
    padding: 0px;
    margin: 0px;
}

Answer 1

尝试在图像上将垂直对齐设置为底部：

#containerBarKonge img { vertical-align: bottom; }

Answer 2

问题来自图片的默认属性为“display：inline;” - 这相当于说“让这个图像像文本一样运行。”

图像应该很少用作内联容器。相反，应将图片定义为显示：block或inline-block。这使您可以更精确地控制您的图像 - 只需将其与顶部或底部对齐即可。如果你想从底部获得图像1px怎么办？使用vertical-align，你不能。

所以解决方案是执行以下操作：

#containerBarKonge > ul li {
  display: block;
  height: 20px; /* or however tall it is */
}
#containerBarKong > ul li img {
  display: inline-block;
  /* Assuming it is 18px tall and you want it at the bottom: 20 - 18 = 2px */
  margin: 2px 0 0 0;
}

你去吧。您可以精确控制图像的位置，同时保持其像文本一样运行的能力。