이미지 아래의 공백 제거

이미지 아래의 공백 제거

---

이 질문에는 이미 답변이 있습니다.

• 사업부 내부 이미지는 이미지 아래에 여분의 공간이 9 답변을

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