为什么容器div坚持比IMG或SVG内容略大？
我试图制作另一个灯箱，但是我遇到了一个看起来微不足道的样式问题，但我无法解决这个问题。
我有一个包含img的div 。 无论我尝试（ border ， margin ， padding ，自动高度等），我只是不能使div缩小以匹配图像尺寸。 我已经减less了这个问题：
<!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三angular洲来自哪里。
尝试添加：
img { display: block; }
到你的CSS。 由于默认情况下<img>是内联元素，因此其高度的计算方式与默认的行高有关。
在内联元素上，行高CSS属性指定用于计算行框高度的高度。
在块级元素上，行高指定元素内行框的最小高度。
来源： https ： //developer.mozilla.org/en/CSS/line-height
您的图像正在使用其父级的行高。 尝试这个：
.imagebg { line-height: 0 }
尝试添加：
vertical-align: middle;
这是谷歌材料devise精简版用于消除audio，canvas，iframes，图像，video和他们的容器底部之间的差距。
Material Design Lite： https ： //getmdl.io
Github discusion： https ： //github.com/h5bp/html5-boilerplate/issues/440
基本上，你在IE上得到这个错误，虽然你没有提到，但这是事实。 IE在<img>标签下生成一些额外的空间。 因此，它是一个很好的做法，使图像img { display: block; } img { display: block; } 。
编辑：你可以说它的IE的错误
如果您不想更改元素的display ，请尝试
margin-bottom: -4px;
