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

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


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

查看所有标签

猜你喜欢:

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

区块链技术驱动金融

区块链技术驱动金融

阿尔文德·纳拉亚南、约什·贝努、爱德华·费尔顿、安德鲁·米勒、史蒂文·戈德费德 / 林华、王勇 / 中信出版社,中信出版集团 / 2016-8-25 / CNY 79.00

从数字货币及智能合约技术层面,解读了区块链技术在金融领域的运用。“如果你正在寻找一本在技术层面解释比特币是如何运作的,并且你有一定计算机科学和编程的基本知识,这本书应该很适合你。” 《区块链:技术驱动金融》回答了一系列关于比特币如何运用区块链技术运作的问题,并且着重讲述了各种技术功能,以及未来会形成的网络。比特币是如何运作的?它因何而与众不同?你的比特币安全吗?比特币用户如何匿名?区块链如何......一起来看看 《区块链技术驱动金融》 这本书的介绍吧!

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

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

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

在线XML、JSON转换工具