Нежелательный интервал ниже изображения

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, Это дает вам очень точный контроль над вашими iamges по сравнению с - просто выровняйте это по верху или низу. Что делать, если вы хотите изображение 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;
}

вот и ты. У вас есть ТОЧНОЕ управление позиционированием изображения, в то время как оно сохраняет способность бегать как текст.