이미지 아래 공백 제거

이미지 아래 공백 제거

이 질문에는 이미 다음과 같은 답이 있습니다.

내부 div 이미지 아래에 추가 공간이 있습니다. (10개 답변)

마감됨7년 전에.

Firefox에서 비디오 썸네일만 이미지 하단과 테두리 사이에 2-3픽셀의 신비로운 공백을 표시합니다(아래 참조).

파이어버그에서 생각나는 모든 것을 시도했지만 실패했습니다.

이 공백을 어떻게 제거할 수 있습니까?

여러분은 하강자를 위한 공간('y'와 'p'의 바닥에 늘어뜨린 조각)을 보고 있습니다.img기본적으로 인라인 요소입니다.이렇게 하면 간격이 제거됩니다.

.youtube-thumb img { display: block; }

블록 모드를 수정하지 않으려면 아래 코드를 사용할 수 있습니다.

img{vertical-align:text-bottom}

또는 Stuart가 제안하는 대로 다음을 사용할 수 있습니다.

img{vertical-align:bottom}

이미지를 인라인으로 보존하려면 저장할 수 있습니다.vertical-align: top또는vertical-align: bottom기본적으로 기준선에 정렬되어 있으므로 그 아래에 몇 개의 픽셀이 있습니다.

이 문제에 대한 여러 가지 해결책을 테스트하기 위해 제이에스아이들을 설정했습니다.[어두운] 기준에 근거하여

최대 유연성

이상한 행동은 없습니다.

여기서 승인된 답변은

img { display: block; }

많은 사람들이 추천하는 (이 훌륭한 기사와 같이) 실제로는 4위입니다.

1위, 2위, 3위는 모두 이 세 가지 솔루션 사이의 경쟁입니다.

@Dave Kok과 @Hassan Gursoy가 제시한 솔루션:

img { vertical-align: top; } /* or bottom */

장점:

• 모든 표시 값은 상위 및 img 모두에서 작동합니다.
• 아주 이상한 행동은 없습니다. img의 형제자매는 여러분이 예상했던 곳에 떨어집니다.
• 매우 효율적입니다.

단점:

• 부모와 img 모두 'display: inline'을 가지고 있는 [완벽하게 유효한] 경우, 이 속성의 값은 img의 부모 위치를 결정할 수 있습니다(약간 이상합니다).

정font-size: 0;상위 요소:

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

에는 [종류]가 필요하기 입니다.vertical-align: top에서.img이것은 기본적으로 첫 번째 솔루션의 확장입니다.

장점:

• 모든 표시 값은 상위 및 img 모두에서 작동합니다.
• 아주 이상한 행동은 없습니다. img의 형제자매는 여러분이 예상했던 곳에 떨어집니다.
• img의 모든 형제에 대한 인라인 공백 문제를 해결합니다.
• 이렇게 하면 부모와 img 모두 'display: inline'을 가지고 있는 경우에도 부모의 위치가 계속 이동하지만 적어도 부모는 더 이상 볼 수 없습니다.

단점:

• 코드 효율성이 떨어집니다.
• 이것은 "올바른" 마크업을 가정합니다. img에 텍스트 노드 형제자매가 있으면 해당 형제자매는 표시되지 않습니다.

설정line-height: 0상위 요소:

.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}

두 번째 솔루션과 마찬가지로 완전히 유연하게 만들기 위해서는 기본적으로 첫 번째 솔루션의 연장이 됩니다.

장점:

• 상위 및 img에 'display: inline'이 있는 경우를 제외하고 모든 디스플레이 조합에서 처음 두 솔루션처럼 작동합니다.

단점:

• 코드 효율성이 떨어집니다.
• 부모와 img 모두 'display: inline'을 가지고 있는 경우, 우리는 모든 종류의 광기를 느낍니다.('라인 높이' 속성을 가지고 노는 것은 좋은 생각이 아닐 수도 있습니다...)

자, 여기 있습니다.이것이 불쌍한 사람에게 도움이 되길 바랍니다.

저는 이 질문을 찾았지만 여기 있는 어떤 해결책도 저에게 효과가 없었습니다.저는 Chrome에서 아래 이미지의 공백을 제거한 다른 솔루션을 찾았습니다.추가해야 했습니다.line-height:0;내 CSS의 img 셀렉터에 연결하고 아래 이미지의 공백이 사라졌습니다.

2013년에도 브라우저에서 이 문제가 지속된다는 것은 미친 일입니다.

이 확률이 있다면, 블록을 사용하지 않으려면 다른 곳에서 완벽한 해결책을 찾았습니다.

img { vertical-align: top }

.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}

디브의 높이를 지정합니다..youtube-thumb이미지의 높이.파이어폭스 브라우저에서 문제가 발생할 것입니다.

.youtube-thumb{ height: 106px }

앞에서 언급한 것처럼 이미지는 텍스트로 처리되므로 하단은 성가신 "p,q,y,g,j"를 수용하는 것입니다. 가장 쉬운 해결책은 img 디스플레이:block;을 CSS에 할당하는 것입니다.

그러나 이것은 텍스트와 함께 흐르는 표준 이미지 동작을 억제합니다.그 행동을 유지하고 공간을 없애는 것.저는 이런 것으로 이미지를 포장하는 것을 추천합니다.

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>

언급URL : https://stackoverflow.com/questions/7774814/remove-white-space-below-image