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

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


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

查看所有标签

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

数据挖掘

数据挖掘

(美)Jiawei Han、(加)Micheline Kamber、(加)Jian Pei / 范明、孟小峰 / 机械工业出版社 / 2012-8 / 79.00元

数据挖掘领域最具里程碑意义的经典著作 完整全面阐述该领域的重要知识和技术创新 这是一本数据挖掘和知识发现的优秀教材,结构合理、条理清晰。本书既保留了相当篇幅讲述数据挖掘的基本概念和方法,又增加了若干章节介绍数据挖掘领域最新的技术和发展,因此既适合初学者学习又适合专业人员和实践者参考。本书视角广阔、资料翔实、内容全面,能够为有意深入研究相关技术的读者提供足够的参考和支持。总之, 强烈推荐......一起来看看 《数据挖掘》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具