이미지 아래 원하지 않는 간격

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

문제는 이미지에서 온다 defa가있는 "display : inline;"의 ult 속성 - 이것은 "이 이미지를 텍스트와 같이 실행하십시오"라고 말하는 것과 같습니다.

이미지는 인라인 컨테이너로 거의 사용되지 않아야합니다. 대신 이미지는 디스플레이 : 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; 
} 

당신이 이동합니다. 이미지와 같은 텍스트를 따라 실행하는 동안 이미지의 위치를 ​​정확하게 제어 할 수 있습니다.