为什么即使边距和填充为零，图像也会出现意外的底部填充？

了解图像下方神秘的填充

即使将填充和边距设置为零？

说明

图像被视为内联块元素，类似于文本中的字符。它们遵循基线规则，即穿过大多数字母底部的一条线。但是，某些字母（例如“p”和“q”）的下降部分延伸到基线以下。为了防止这些下行部分与后续行冲突，在基线下方保留了空间。

图像与此基线对齐，即使没有文本，也会在底部产生额外的空间。

解决方案

要缓解此问题，请将CSS属性vertical-align：bottom应用于图像。这会将图像与行底部对齐，消除神秘的填充。

注意

虽然此解决方案解决了填充问题，但如果图像小于行高。在这种情况下，图像上方可能会出现额外的空间。要纠正此问题，请将 line-height: 1px 添加到容器元素。

以上是为什么即使边距和填充为零，图像也会出现意外的底部填充？的详细内容。更多信息请关注PHP中文网其他相关文章！