이미지 아래의 공백 제거
이 질문에는 이미 답변이 있습니다.
Firefox에서는 내 비디오 썸네일 만 이미지 하단과 테두리 사이에 2-3 픽셀의 공백이 표시됩니다 (아래 참조).
Firebug에서 생각할 수있는 모든 것을 운없이 시도했습니다.
이 공백을 어떻게 제거 할 수 있습니까?
img
기본적으로 인라인 요소 이기 때문에 자손을위한 공간이 있습니다 ( 'y'와 'p'의 맨 아래에있는 비트) . 이것은 격차를 제거합니다.
.youtube-thumb img { display: block; }
블록 모드를 수정하지 않으려면 아래 코드를 사용할 수 있습니다.
img{vertical-align:text-bottom}
또는 스튜어트가 제안한대로 다음을 사용할 수 있습니다.
img{vertical-align:bottom}
이미지를 유지하고 싶은 경우에 당신은 넣을 수 있습니다 인라인으로 vertical-align: top
또는 vertical-align: bottom
그 위에. 기본적으로 기준선에 정렬되므로 그 아래에 몇 개의 픽셀이 있습니다.
이 문제에 대한 여러 가지 솔루션을 테스트 하기 위해 JSFiddle 을 설정했습니다 . [모호한] 기준에 따라
1) 최대 유연성
2) 이상한 행동 없음
여기에 허용 된 답변
img { display: block; }
이 훌륭한 기사 에서와 같이 많은 사람들이 권장하며 실제로 4 위를 차지합니다.
1 위, 2 위 및 3 위는 모두이 세 가지 솔루션 사이에서 발생합니다.
1) @Dave Kok 및 @Hasan Gursoy가 제공 한 솔루션 :
img { vertical-align: top; } /* or bottom */
찬성 :
- 모든 표시 값은 부모와 img 모두에서 작동합니다.
- 이상한 행동은 없습니다. img의 형제들은 당신이 기대하는 곳에 떨어집니다.
- 매우 효율적입니다.
단점 :
- 부모와 img가 'display : inline'을 갖는 [완벽하게 유효한] 경우,이 프로퍼티의 값은 img 부모의 위치를 결정할 수 있습니다 (조금 이상합니다).
2) 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에 텍스트 노드 형제가 있으면 표시되지 않습니다.
3) 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;}
div .youtube-thumb
의 높이에 이미지의 높이를 지정하십시오. Firefox 브라우저에서 문제를 설정해야합니다.
.youtube-thumb{ height: 106px }
앞에서 언급했듯이 이미지는 텍스트로 취급되므로 하단은 성가신 것을 수용해야합니다. "p, q, y, g, j"; 가장 쉬운 해결책은 img display : 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
'Programing' 카테고리의 다른 글
base64로 인코딩 된 문자열을 어떻게 디코딩합니까? (0) | 2020.04.11 |
---|---|
어디에 vs HAVING (0) | 2020.04.11 |
여러 단계 항목에 대한 자식에서 치명적인 오류가 발생합니다. (0) | 2020.04.11 |
matplotlib 플롯에서 xticks를 제거 하시겠습니까? (0) | 2020.04.11 |
헤더를 사용하여 C #에서 CSV 파일 구문 분석 (0) | 2020.04.11 |