为何为div设置padding-left/right会在底部产生空白？

其实这个问题和padding本身没啥直接关系，核心是img元素的默认排版特性在搞鬼：

img属于替换元素，默认会和文字的基线对齐，而文字的行高会在基线下方留一段空白（就是平时文字底部到容器底部的那点空隙）。当你给div加了padding-left/right后，这个原本就存在的底部留白被你注意到了——并不是padding导致了空白，而是它让原本隐藏的问题显现出来了。

你说设置了padding-bottom:0没用，因为这个空白根本不是padding带来的，而是img和父元素基线对齐产生的行高留白。

几种彻底解决的方法（除了你用的margin方法）： #

• 给img设置display: block：让图片脱离inline排版流，直接占满容器高度，自然就没了基线对齐的留白
• 给img设置vertical-align: bottom或者vertical-align: middle：改变图片的对齐方式，不再和基线对齐，空隙就消失了
• 给父div设置font-size: 0：把父元素的文字行高清零，基线留白也就跟着没了（如果容器里没其他文字的话，这个方法很省心）

内容的提问来源于stack exchange，提问作者Mash tan