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

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

内容简介:在使用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设置元素为行内元素时,元素之间存在间隙问题

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


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

查看所有标签

猜你喜欢:

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

轻快的Java

轻快的Java

(美)塔特、杰兰德/国别:中国大陆 / 张晓坤 / 中国电力出版社 / 2006-7 / 29.00元

Java的开发者正深陷于复杂性的泥沼中而无法自拔。我们的经验和能力正接近极限,程序员为了编写支持所选框架的程序所花的时间比解决真正问题的时间要多得多。我们不禁要问,有必要把Java搞得这么复杂吗?   答案是否定的。本书给你指引了一条出路。无论是维护应用程序,还是从头开始设计,你都能够超越成规,并大幅精简基本框架、开发过程和最终代码。你能重新掌握一度失控的J2EE应用程序。   在本书......一起来看看 《轻快的Java》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

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

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具