display:table-cell,inline-block 之间的缝隙

1.dispaly:table-call ,会让你对元素设置的为百分百的宽度失效,设置正常数值宽高时,

vertical-align: middle;可让内部元素垂直居中,但如果加上position:absolute或者fixed ,
vertical-align: middle会失效
2.font-size:0;
可以去掉inline-block 之间的缝隙。
<div style="font-size:0;">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
    </div>

或者 可以用 

letter-spaceing:-4px;
<div style="letter-spaceing:-4px;">
    <img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
    <img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
</div>

两个一起用,兼容性最好

<div style="letter-spacing:-4px; font-size:0;">
    <img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="border-right:4px solid #066;" />
    <img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" style="border-left:4px solid #F36;" />
</div>

 

 
posted @ 2017-09-27 16:16  莫笑我胡为  阅读(242)  评论(0编辑  收藏  举报