2013-04-08 4 views
0

이 소유자 페이지의 코드에 어떤 문제가 있는지 잘 모르겠습니다. 뭔가 형식을 손상시키고 있으며 인라인 블록 및 클리어링 상자와 관련이 있다고 확신합니다.인라인 이미지 및 스태킹

누가 올바른 방향으로 나를 조종 할 수 있습니까? 이전에 이미지로 페이지를 만들지 않았습니다.

이 줄은 렌더링시 127px로 높지만 이미지는 121px 밖에되지 않습니다.

<a class="imageleft" href="#"><img src="images/4.jpg" width="76" height="121"></a> 

내가 여기에서 놓친 것을 누구든지 볼 수 있습니까?

사이트 : 사전에 http://michaelbirchall.com/etc/dvd-page/

감사합니다.

+0

사이트의 아래. JSFiddle을 만들 수 있습니까? –

+0

이상한, 나에게 달렸어 ... 어쨌든이 링크를 사용해 보시겠습니까? http://jsfiddle.net/2ZVVX/1/ – MDB

답변

1

문제는 상속 font-size있을 것입니다. 이미지의 맨 아래 줄에도 영향을 미치지 만 그 아래에 다른 이미지가 없으므로 눈에 띄지 않습니다. 페이지가 모두 이미지이므로 0으로 설정하면됩니다.

http://jsfiddle.net/2ZVVX/6/

CSS

* { 
    margin: 0; 
    padding: 0; 
    font-size: 0; 
} 
+0

이상하게도, 왜이 마지막 이미지가 나머지 아래에 있는지 누가 알 수 있습니까? http://michaelbirchall.com/etc/dvd-page/ – MDB

+0

고마워요. 나는 어려운 방향으로 가고있었습니다 ... 나는 당신이 제안한대로 이미지를 다시 만들었습니다. 때로는 문제에서 벗어나는 것이 좋습니다. – MDB

+0

흠, font-size : 0을 설정했습니다. 여백 : 0; 하지만 여전히 호버 이미지 사이에 작은 선이있는 것처럼 보입니까? 그냥 내 화면인가요? http://www.michaelbirchall.com/etc/dvd-page/ – MDB

0

.imageleftinline-block 요소입니다.이 요소는 행의 높이가 영향을줍니다. 그냥 line-height: 0를 설정하고 작동 :

http://jsfiddle.net/2ZVVX/5/

+0

정말요? .container-content class에 대해 이야기하고 있습니까? 나는 단지 그것을했고 그것은 나를 위해 아무것도하지 않았다? http://jsfiddle.net/2ZVVX/3/ – MDB

+0

http://imgur.com/G8VG4Dd 컨테이너에서 자동으로 여백을 제거하더라도 얻을 수있는 것입니다. – MDB

+0

@ michaelbirchall.com 죄송합니다. 질문을받지 못했습니다. 수정 된 답변. 다른 문제는 인라인 블록에서 요소가 같은 레벨에 있어야한다는 점입니다. 두 번째 검은 색 공간을 설명합니다. 이를 위해 상대 위치 지정을 사용해야합니다. –