HTML中<img>元素周围出现白边，常规CSS方案无效求解决

解决元素周围多余白边的问题 #

你遇到的这个白边，本质是<img>作为行内替换元素，默认会和文本基线对齐，导致底部留出的空白——这不是border、outline这类样式的问题，所以之前的设置没用。

给你几个可行的解决方案：

• 将<img>设置为块级元素，彻底脱离行内布局的基线规则：

img {
    width: 256px;
    height: 256px;
    display: block;
}

• 修改<img>的垂直对齐方式，让它不按基线对齐：

img {
    width: 256px;
    height: 256px;
    vertical-align: bottom; /* middle、top 也可以 */
}

• 给父元素.button设置行高为0，消除行内布局带来的空白：

.button {
    padding: 0;
    margin: 0;
    line-height: 0;
}

选其中一种方法就能解决问题了。

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