多个img图片之间存在间隔的多个解决办法?

多个img图片并排显示,中间总是有8个像素的间隔(padding,margin均已设为0)。已找到一种解决办法,就是多个img标签连着写,不换行、不留空格,但这种方法对阅读代码和修改代码很不友好,问还有其他解决方案吗?谢谢!

阅读 15.9k
5 个回答

为什么多个img之间会有间隔, 因为是img标签的显示是inline-block的原因,你换行在父级元素看来,是有一个空格的字符的,所以存在8个像素,这个因浏览器不同,像素也不一样。根本原因在于父级元素把空格当做一个字符处理。解决方法:

  1. 父级元素 设置 font-size: 0;

  2. <img /><img/><img/> 连着写,没有空格

  3. 设置 float, 但要记得清除掉float。

把img标签设置为display:block; 试试看。 或者添加浮动设置float:left。

试着将img写在li标签下试试

父级元素 font-size: 0;

1.给父级元素赋予高度,强行让其没有留白
2.给父级设置line-height: 0;或者 font-size: 0;
3.给img设置vertical-align: middle;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题