今天写css时发现，图片加起来刚好是900px的三张图片，不能在一个900px宽容器放下，因为图片之间有间隔，我猜是浏览器把两个img标签之间的空格当成了空白节点。

在网上找到了几个不错的解决方法：

1.多个img标签写在一行

<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标签的父级上写：font-size:0;//这个在解决display：inline-block出现的问题也有帮助

<div style="font-size:0">
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
</div>

效果：技术分享

 

3.使用display：block(img是内联元素)//要float一下才行

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>

效果:技术分享

 

4.使用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>

效果:技术分享

 

我有一个还不错的订阅号，里面有很多it学习资料以及最新资讯，可以微信搜索“itheimaCS”关注，等待你的到来，不要迷路了。



Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生