Почему контейнерный дивизион настаивает на том, чтобы быть немного больше содержимого 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>
& APOS; picture.jpg & APOS; 640x400, но размер контейнера хочет быть 640x404, разница показывается черной полосой под изображением. Div существует так, что я могу сделать изображение более черным, смешав его непрозрачность до 0, поменять его местами, а затем снова смешать.
Я посмотрел на вычисленные стили в нескольких браузерах и не вижу, откуда берется дельта 4px.