img 的间隙问题

哎呀!好久都没有写文章了。。。
在 div 内设置一张 img
会发现 img 下方出现一块间隙

Paste_Image.png
Paste_Image.png

问题描述:
正如你看到的在 div 内设置一张 img
会发现 img 下方出现一块间隙

原因解析:
因为内联块元素默认文字对齐
为 baseline(基线)

解决方案:

1.更改标签的类型
    display: block;
2.设置文字的字号为 0
    font-size: 0;
3.设置垂直对齐方式
    vertical-align (除了 baseline)
4.将 img 的宽度与高度设置成百分比
    width: 100%;
    height: 100%;
Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 5,053评论 0 9
  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 4,994评论 8 34
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 以下文章是我在网上收集的内容,为了记录自己的学习以及为了以后不到处找而记录下来,如果对你有用,请感谢写这些文章的前...
    DCbryant阅读 953评论 0 2
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,512评论 0 6