li 요소의 여백/패딩

Question

여백/패딩의 이상한 효과를 수정하는 방법은 무엇입니까? (jsfiddle) : i.imgur.com/64S8C.jpg li 요소에 여백/패딩이 필요하지 않습니다.

Answer 1

float 속성을 사용해보십시오 :

li img { 
    float: left; 
} 

또는 vertical-align :

텍스트와 이미지의 주위에 여분의 공간이 있기 때문에 마진이나 패딩의 생성되지 않습니다

li img { 
    vertical-align:middle; 
} 

Answer 2

하지만 때문에 어떻게의를 이미지는 텍스트와 관련하여 세로로 정렬됩니다.

이미지에 vertical-align: middle을 설정하면 원하는 결과를 얻을 수 있습니다. 이미지를 완벽하게 만들려면 원하는 위치에 놓일 때까지 음의 위쪽 여백으로 이미지 위치를 조정하십시오. 다음은 (jsfiddle) 나를 위해 잘 작동합니다.

li img { 
    vertical-align: middle; 
    margin-top: -3px; 
}