HTML图片img标签空白解决方法

图片垂直结构有空白

首先我们要知道这部分空白产生的原因。图片默认的vertical-align:baseline(基线)

也就是字母X的下边距，如下图

可以看到图片是与字母x的下边距对齐的，也就是baseline，css2的文档中有这么一句解释，翻译过来也就是一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

1.最简单粗暴也是最有效的方法：img{display:block;}

2.img{vertical-align:middle;}

3.设置包裹层 line-height：0，或者是设置font-size:0,*/

<style>*{margin:0;padding:0;}img{width:200px;  /*第一种方法 因为可以设置width,height所以是inline-block*/          display:block;  /*第二种方法 个人赞同这一种，因为大部分图片和文字都是垂直居中的*/           vertical-align:top/bottom/middle/text-top/text-bottom;}

 .parent{width:500px;vertical-align: middle;background:green;   /*第三种方法 行高设置足够小*/            line-height:0;    /*第四种方法  将font-size设为0，实际上也是改变了line-height*/            font-size:0;}

</style> </head> <body> <div class="parent"> <img src="./pic/1.jpg"></div> <span>abcdefghistuvwxyz啊不错的风格化ijklmn</span> </body> </html>

图片水平结构有空白

 <title>Document</title><style>*{margin:0;padding:0;}.parent{width:500px;vertical-align: middle;background:green;}img{width:200px;}</style>
</head>
<body><div class="parent"><img src="./pic/1.jpg"><img src="./pic/1.jpg"></div></body>
</html>

效果图如下：

 <style>*{margin:0;padding:0;}.parent{width:500px;overflow: auto;vertical-align: middle;background:green;}img{width:200px; /*第二种解决方法*/float:left;display: block;}</style>
</head>
<body>第一种方法把img标签紧挨在一起对比上一页的代码就知道了<div class="parent"><img src="./pic/1.jpg"><img src="./pic/1.jpg"></div></body>
</html>

转载于:https://www.cnblogs.com/xingkongly/p/7530472.html

HTML图片img标签空白解决方法相关推荐

html 图片空白,HTML图片标签空白解决方法
图片垂直结构有空白首先我们要知道这部分空白产生的原因.图片默认的vertical-align:baseline(基线) 也就是字母X的下边距,如下图可以看到图片是与字母x的下边距对齐的,也就是ba ...
java显示一张图片不显示_微信图片不可显示java解决方法
场景: 微信上传了图片素材,返回了图片url,然后不能在img标签中正常显示. 原因是微信做了图片防盗连接. 解决方法: 原理:使用你的服务端脚本,远程抓取图片,然后输出image/* 格式,就可以了 ...
小程序图片不显示的解决方法
小程序图片不显示的解决方法检查图片命名是否为英文图片是否使用image标签加载的背景图片不能使用本地图片地址图片名有没有空格
ie弹出空白html文档,IE下打开网页有时显示空白解决方法.doc
IE下打开网页有时显示空白解决方法辩叮妖奏爪安晒钙趴佯盎褥柠擅忍辖豺粉确吗面须倍隙履颗肩遍德聂聚骋恒佃池霞隐净庙位镀苑称谆亚霉陶抿驶目常雕醛木胯焕嵌帖恬硫田锗囱凭奈沙皇樊功绳俞渊疮讼蜒峨艳裙赐桐某婿 ...
【Microsoft Word】编辑文字后，图片位置混乱的解决方法
[Microsoft Word]编辑文字后,图片位置混乱的解决方法参考文章: (1)[Microsoft Word]编辑文字后,图片位置混乱的解决方法 (2)https://www.cnblogs. ...
dedecms织梦系统后台验证码图片不显示的解决方法
dedecms织梦系统后台验证码图片不显示的解决方法参考文章: (1)dedecms织梦系统后台验证码图片不显示的解决方法 (2)https://www.cnblogs.com/afish/p/40 ...
universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法
universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法参考文章: (1)universal image loader在listview/ ...
android百度地图覆盖物异步加载图片,Android 百度地图marker中图片不显示的解决方法(推荐)...
目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: ...
php搭建的网站空白,使用phpstudy搭建dedecms网站后台页面空白解决方法
这篇文章主要为大家详细介绍了使用phpstudy搭建dedecms网站后台页面空白解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 在把 phpStudy ...

HTML图片img标签空白解决方法

HTML图片img标签空白解决方法相关推荐

最新文章

热门文章