이미지의 왼쪽 여백이 설정되어 있지 않습니다.

Question

이미지가있는 목록을 나란히 만들려고합니다. 각 목록에는 링크와 호버에 대한 효과가 있습니다. 이미지가 142px 어딘가에서 왼쪽 여백을 만드는 것을 제외하고는 모든 것이 잘 작동합니다.

여백은 0 (여러 번, margin: 0으로 선언)이고 Firebug (Firefox 디버그 도구)를 사용하면 이미지의 여백이 142px라고합니다. 다음

코드 (물론, 단축)이다

<div id=""> 
    <ul> 
     <li><a href=""><img src="" /><img class="bloom" src="" /></a></li> 
     <li><a href=""><img src="" /><img class="bloom" src="" /></a></li> 
     <li><a href=""><img src="" /><img class="bloom" src="" /></a></li> 
    </ul> 
</div> 

그리고 CSS :

# { 
    height: 185px; 
    padding: 16px 0px; 
    position: relative; 
    width: 100%; 
} 

# ul { 
    list-style: none; 
    width: 951px; 
} 

# li { 
    background: black; /*just to verify if the margin was on the LI or IMG*/ 
    float: left; 
    height: 185px; 
    margin: 0 16px; 
    width: 285px; 
} 

# img { 
    position: absolute; 
} 

# img.bloom { 
    display: none; 
    z-index: 1; 
} 

은 "꽃"이미지 호버 효과의 일부이다. 위에서 볼 수 있듯이 NOWHERE는 "여백이 남았습니다"라고 설정되지 않았으며 여기 또는 CSS의 어느 곳에서도 설정되지 않았습니다. 하단의 이미지는 http://ranierialthoff.com.br/elite/ 링크에서 볼 수 있습니다.

Answer 1

#unidades li 요소에 text-align:center이 표시됩니다. img가 가운데에 있습니다.

문제를 해결하기 위해 left으로 변경할 수 있습니다.

중앙 집중화하려는 경우. 을 #unidades img에서 제거하고 text-align:center을 계속 유지하십시오.

Answer 2

왼쪽 여백이 아니라 이미지의 위치입니다. 문제는 당신이 브라우저를 말하지 않고 이미지를 절대적으로 배치한다는 것입니다. 어디에 넣을 지. #unidades img 스타일에 top: 0; left: 0; 또는 이와 비슷한 것을 추가해야합니다.