多个Img标签之间的间隙处理方法
2019-08-10 18:22
1481 查看
1.多个标签写在一行
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
效果前:
效果后:
2.将要闭合标签的地方与开始标签的地方重合
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" /><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" />
3.使用注释头尾相连
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><!-- --><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" />
4.在img标签的父级上写:font-size:0; 推荐是用这个方法。这个方法我已经实践简单实用
<div style="font-size:0"> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>
效果:
5.使用display:block(img是内联元素)
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/>
效果:
6.使用letter-spacing属性
<div style="letter-spacing:-800px"><!--letter-spacing的值无论是负多少都不会产生重叠--> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>
效果:
文章来自赵启泽博客 http://www.cnblogs.com/zqzjs/ 总结的很棒
相关文章推荐
- 前端之HTML-多个Img标签之间的间隙处理方法
- 多个Img标签之间的间隙处理方法
- 多个Img标签之间的间隙处理方法
- 正则表达式处理图片地址、img标签的方法
- css 图片有间隔多个Img标签之间的间隙
- 【正则表达式】正则表达式处理图片地址、img标签的方法
- div之间有间隙以及img和div之间有间隙的原因及解决方法
- 使用img标签会有间隙的解决方法
- css 图片有间隔多个Img标签之间的间隙
- 解决img标签上下出现间隙的方法
- js封装获取标签处理操作 ,ajax,ready()方法
- 使用多个li标签产生空白间隙解决方法
- Android Activity之间跳转出现短暂黑屏的处理方法(转)
- 【图像处理】一种求三维空间中两单位向量之间旋转矩阵的方法
- php文件之间相互引用路径问题的一般处理方法
- img使用br换行后之间有空隙的解决方法
- iOS程序开发引用的第三方库之间出现duplicate symbol时的处理方法
- <img/>标签onerror事件在IE下的bug和解决方法
- img标签下多余空白BUG解决方法 / div / img / 图片 / 空格
- iOS程序开发引用的第三方库之间出现冲突的处理方法