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

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

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

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


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

查看所有标签

猜你喜欢:

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

在你身边,为你设计

在你身边,为你设计

腾讯公司用户研究与体验设计部 / 电子工业出版社 / 2013-1 / 69.00元

设计属于所有人,也意在为所有人使用,这既是设计的价值,也是设计的责任。本书内容包括:设计理念、设计方法、用户研究、体验设计、设计流程和工具,以及团队成长与管理等方面的知识与经验分享。一起来看看 《在你身边,为你设计》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具