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

Program / 글쓴이

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’는 640×400이지만 컨테이너 div는 640×404를 원하며 차이는 이미지 아래에 검은 색 줄로 표시됩니다. div가 존재하므로 불투명도를 0으로 블렌딩하여 이미지를 검은 색으로 바꾼 다음 스왑 한 다음 다시 블렌드 할 수 있습니다.

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

답변

추가 시도 :

img { display: block; }

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

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

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

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

답변

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

.imagebg { line-height: 0 }

답변

추가해보십시오 : 

vertical-align: middle;

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

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

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

답변

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

.imagebg { display: flex }

답변

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

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

답변

display요소 를 변경하고 싶지 않다면

margin-bottom: -4px;

답변