图片下间隙问题
Posted houfee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片下间隙问题相关的知识，希望对你有一定的参考价值。
1、问题描述
图片和文字在一个盒子中显示时，图片和文字不会在底部对齐(图片大小190*150)
2、分析
图片的对齐方式是按照基线对齐的，而文字确实按照底部对齐
解决图片下间隙方法
1.设置元素在垂直方向上对齐
<head> <style> img { vertical-align: bottom; } </style> </head> <body> <div> abcdefg <img src="./1.jpg" alt=""> </div> </body>
2.将图片由行内块元素变成块元素
<head> <style> img { display: block; } </style> </head> <body> <div> abcdefg <img src="./1.jpg" alt=""> </div> </body>
3.设置字体大小为0px
<head> <style> div { font-size: 0px; } </style> </head> <body> <div> abcdefg <img src="./1.jpg" alt=""> </div> </body>
4.设置图片的浮动属性
<head> <style> img { float: left; } </style> </head> <body> <div> abcdefg <img src="./1.jpg" alt=""> </div> </body>
以上是关于图片下间隙问题的主要内容，如果未能解决你的问题，请参考以下文章