我正在尝试制作另一个需要极好的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增量来自何处。