컨테이너 사업부가 IMG 또는 SVG 콘텐츠보다 약간 더 큰 것을 주장하는 이유는 무엇입니까?

78

HTML / CSS / Javascript 연습에 필요한 또 다른 라이트 박스를 제작하려고했지만 사소한 스타일링 문제가 발생했습니다 (아마도!).하지만 해결할 수 없습니다.

나는이 div가 포함를 img. 내가 시도 상관없이 ( border, margin, padding, 자동 높이 등) 난 그냥 할 수없는 div이미지 크기에 맞게 축소합니다. 나는 이것으로 문제를 줄였습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>Layout experiments</title>

        <style type="text/css">
            #lightbox {
                margin: 0;
                padding: 0;
                position    : fixed;
                left        : 50%;
                margin-left : -320px;
                top         : 100px;
                border-radius: 22px;
                background  : #e0e0f0;
                color       : #102020;
            }

            #lightbox img {
                border-radius: 15px;
            }
            .imagebg {
                margin      : 7px;
                background  : black;
                border-radius: 15px;
                height      : 100%;
            }

        </style>

    </head>
    <body>

        <div id="lightbox">
            <div class="imagebg">
                <img src="picture.jpg">
            </div>
        </div>
    </body>
</html>

'picture.jpg'는 640x400이지만 컨테이너 div는 640x404를 원하며 차이는 이미지 아래에 검은 색 줄로 표시됩니다. div가 존재하므로 불투명도를 0으로 블렌딩하여 이미지를 검은 색으로 바꾼 다음 스왑 한 다음 다시 블렌드 할 수 있습니다.

여러 브라우저에서 계산 된 스타일을 살펴 봤는데 4px 델타가 어디에서 오는지 알 수 없습니다.

css 
— 크리스
소스

답변:

162

추가 시도 :

img { display: block; }

CSS에. <img>는 기본적으로 인라인 요소 이므로 기본 줄 높이 값과 관련하여 높이가 다르게 계산됩니다.

인라인 요소에서 line-height CSS 속성은 라인 상자 높이 계산에 사용되는 높이를 지정합니다.

블록 수준 요소에서 line-height는 요소 내에서 줄 상자의 최소 높이를 지정합니다.

출처 : https://developer.mozilla.org/en/CSS/line-height

— sbeliv01
소스
그것은 실제로 그것을 수정합니다. 그것이 왜 차이를 만드는지 자세히 설명해 주시겠습니까? (나는 수락을 보류하지 않습니다. 11 분이 더 지나기 전까지는 허락하지 않을 것입니다.)
— Chris
4
(가) : - @ 크리스 내가 당신을 준 이유 img암시가 line-height할당을, 그에게 약간의 수직 호흡 공간을 제공합니다. 이후 line-height에만 적용이 inline설정 소자들에는 img하기 display: block을 제거한다 line-height.
— Joseph Silber 2012-06-20
@Joseph-위의 요청을했을 때 귀하의 응답을 보지 못했습니다. 그들은 기본적으로 똑같은 것을 직간접 적으로 성취하고 있기 때문에 답 중에서 선택할 것이 많지 않습니다. 먼저 도착한 답변을 받아들이는 것이 공정 해 보이지만 설명해 주셔서 감사합니다.
— Chris
1
이것은 inline-block. 설명 해주셔서 감사합니다.
— Andrew Mao
21

이미지가 부모의 줄 높이를 사용하고 있습니다. 이 시도:

.imagebg { line-height: 0 }
— 조셉 실버
소스
10

추가해보십시오 : 

vertical-align: middle;

이것은 오디오, 캔버스, iframe, 이미지, 비디오 및 컨테이너 하단 사이의 간격을 제거하기 위해 Google 머티리얼 디자인 라이트에서 사용됩니다.

머티리얼 디자인 라이트 : https://getmdl.io

Github 토론 : https://github.com/h5bp/html5-boilerplate/issues/440

— smnmnkr
소스
허용되는 솔루션은 디스플레이를 변경하므로 제 경우에는 바람직하지 않습니다. 이것은 결점없이 나를 위해 일했습니다.
— David Neto
1

다른 작업 답변 외에도 display부모의 속성을 설정 flex하여 나를 위해 일했습니다.

.imagebg { display: flex }
— 미모
소스
0

기본적으로 IE 에서이 오류가 발생하지만 언급하지 않았지만 이것이 사실입니다. IE는 <img>태그 아래에 추가 공간을 생성합니다 . 따라서 이미지를 만드는 것이 좋습니다 img { display: block; }.

편집 : IE의 버그라고 말할 수 있습니다.

— 수 바짓
소스
6
IE를 사용하지 않기 때문에 언급하지 않았습니다. Safari, Chrome 및 Firefox는 모두 동일한 동작을 보여줍니다. Joseph과 sbeliv01의 답변이 모두 작동합니다.
— Chris
IE의 버그가 아닙니다. 모든 <img>는 기본적으로 기준선에 따라 세로로 정렬됩니다. (vertical-align : baseline), 즉 가장 낮은 지점이 글꼴의 기준선 (예 : 문자 'p'에서 원의 가장 낮은 지점)과 정렬됨을 의미합니다. 이를 변경하려면 다른 정렬 방식 (예 : vertical-align : top; 또는 수직 정렬 : 하단;. 고유 한 인라인 속성이 유용 할 수 있으므로 <img>를 블록 요소로 변환 할 필요가 없습니다.
— CaspianRoach
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.