컨테이너 사업부가 IMG 또는 SVG 콘텐츠보다 약간 더 큰 것을 주장하는 이유는 무엇입니까?
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 델타가 어디에서 오는지 알 수 없습니다.
추가 시도 :
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 머티리얼 디자인 라이트에서 사용됩니다.
Material Design Lite: https://getmdl.io
Github discusion: https://github.com/h5bp/html5-boilerplate/issues/440
Basically you are getting this error on IE, though you hve not mentioned but this is the fact. IE generates some extra space below the <img> tag. Hence its a good practice to make the images img { display: block; }.
EDIT: You can say its a bug of IE
If you don't want to change display of the element, try
margin-bottom: -4px;
'Programing' 카테고리의 다른 글
| 문자열에서 숫자를 제거 하시겠습니까? (0) | 2020.11.17 |
|---|---|
| 주 창을 닫을 때 WPF 앱이 종료되지 않음 (0) | 2020.11.17 |
| C #이 C ++와 같은 비 멤버 함수를 허용하지 않는 이유 (0) | 2020.11.17 |
| Mac OS X에서 IntelliJ IDEA의 JDK 문서 (0) | 2020.11.17 |
| didSelectRowAtIndexPath에서 현재 선택한 셀에 도달하는 방법은 무엇입니까? (0) | 2020.11.17 |