CSS 技巧篇(六):display设置元素为行内元素时,元素之间存在间隙问题

栏目: CSS · 发布时间: 7年前

内容简介:在使用display将元素设置为行内元素的同时(例如:inline、inline-block等),将margin全部设置为0,padding全部设置为0的时候,我发现了元素之间居然还存在着间隙!!!???如下图所示:之所以存在间隙是由于元素标签之间留有空白字符造成的。1、第一种 消除元素标签之间的空白字符,把标签连在一起。

在使用display将元素设置为行内元素的同时(例如:inline、inline-block等),将margin全部设置为0,padding全部设置为0的时候,我发现了元素之间居然还存在着间隙!!!???如下图所示:

CSS 技巧篇(六):display设置元素为行内元素时,元素之间存在间隙问题

原因

之所以存在间隙是由于元素标签之间留有空白字符造成的。

解决方案

1、第一种 消除元素标签之间的空白字符,把标签连在一起。

2、第二种: 第一步:在这些行内元素的父元素上设置font-size设置为0; 第二步:在行内元素上设置正常的字体显示大小,例如:font-size:14px;

如下图显示:

CSS 技巧篇(六):display设置元素为行内元素时,元素之间存在间隙问题

这个时候行内元素之间的间隙就消失不见了!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

最优化导论

最优化导论

桑达拉姆 / 人民邮电出版社 / 2008-4 / 59.00元

最优化导论(英文版),ISBN:9787115176073,作者:(美国)(Sundaram、R、K)桑达拉姆一起来看看 《最优化导论》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具