1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
可以看出,这样也可以实现想要的效果。
原因在于,vertical-align 的默认属性就是 baseline ,我们只要设置了跟 baseline 不一样的属性,都可以避免这个问题。
3.第三种解决方案
但是修改了对齐方式,这样也有可能会造成问题呀,我们可不可以去让这个元素飘起来呢?既然你已经不在当前文档流中了,你布局的时候自然也就不会参照这个文字去进行对齐了呀。
我们可以去使用浮动。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
这样也可以解决这个问题,但是请注意,“浮动虽好,可不要贪杯呦”。
你一定要能够正确的解决浮动所造成的影响,而且假如你原本就打算去做文字环绕效果,那么使用浮动一定是你的不二选择。
4.第四种解决方案
假如上面几种方案全都不能解决你的问题,那么只有祭出我的大杀器了。
你可以给你的父元素把文字大小设成0。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
既然你是根据 文字的基线去对齐,我直接把文字给你设没了,这样你就没法定位了吧,但是这种做法,只推荐在你已经“急头白脸死活弄不出来”的时候才去使用的。
以上就是解决img标签上下出现间隙的方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
dreamweaver怎么使用标签及代码设计表格?_dreamweaver教程_网页制作
更多相关阅读请进入《img》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者