解决图片下间隙问题：图片默认就是文字，以基线对齐（英语四线格第三线），基线和底线(四线格第四线)的距离就是下间隙，间隙一般为3px
/*解决下间隙问题 */
/*1: 设置父元素字体大小为0*/
/*font-size: 0;*/
/*2: 行高为0 line-height: 0*/
/* line-height: 0;*/
/*H 水平 v 垂直*/
/*3: 设置垂直对齐方式 vertical-align: 为 顶 top 底 bottom 中 midlle
4: display:block
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
/*
下间隙原因 ： 文字默认以基线(四线拼音格第三条)对齐 图片本质就是文字 以基线对齐的 基线到底线（四线拼音格第四条）的距离就形成了间隙
下间隙默认一般3px 不切合实际 ？ 因为有时候父元素是有有效字体
*/
div {
border: 1px solid #666;
/*解决下间隙问题 */
/*1: 设置父元素字体大小为0*/
/*font-size: 0;*/
/*2: 行高为0 line-height: 0*/
/* line-height: 0;*/
/*H 水平 v 垂直*/
/*3: 设置垂直对齐方式 vertical-align: 为 顶 top 底 bottom 中 midlle
4: display:block
*/
/*文字对齐方式 -》 垂直对齐方式 vertical-align: baseline 基线 */
}
img {
vertical-align: baseline; /*基线对齐---》破坏掉 -》顶 中 底*/
/*vertical-align:bottom;*/
/*display: block;*/
}
</style>
</head>
<body>
<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550920379676&di=5a1e0e0721a3c83324e86af3a2878697&imgtype=0&src=http%3A%2F%2Fwww.hinews.cn%2Fpic%2F0%2F13%2F87%2F24%2F13872402_592137.jpg" alt="">
ggggffffaaaa
</div>
</body>
</html>
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
