inline-block元素间隙产生及去除方法
当我们把元素属性display设置成inline-block时，元素之间就会产生间隙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul{list-style-type: none;}
li{
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 30px;
text-align: center;
color: white;
background-color: purple;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>
效果如下：
当我们把元素ul 下面的li放在同一行的时候你会惊奇的发现间隙消失了
<li>A</li><li>B</li><li>C</li>
所以我们可以认为元素的间隙是由于“回车”或者换行所导致的，但是如果我们为了消除间隙把元素都写在一行的话未免太不美观了，而且对于下一个接手你工作的人也是一个头疼的事情。所以我们采用另一种方法，font-size：0，为什么能消除呢？我们知道间隙是因为空格或者换行所产生的，而产生了一些空白字符，既然是字符当然拜托不了font的控制啦。
ul{list-style-type: none; font-size: 0;} 对产生间隙元素的父元素
当然方法肯定不止这几种，例如负margin，letter-spacing，word-spacing等等也是可以的
inline-block元素间隙产生及去除方法的更多相关文章
- CSS 去掉inline-block元素间隙的几种方法
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 去掉inline-block元素间隙的几种方法
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- inline-block元素间隙问题原因及解决方法
inline-block元素间隙问题原因及解决方法 原因: 书写时由空格.换行或回车所产生空白符所致 解决方法: 方法1:font-size:0 方法2:改变书写方式 方法3:使用margin负值 方 ...
- 关于css布局中，inline-block元素间隙的处理方法
关于inline-block元素间隙的处理 参考橱窗外的小孩,原文链接https://www.cnblogs.com/showcase/p/10469361.html 如下,两个inline-bloc ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
随机推荐
- Node.js入门教程 第四篇 （流及文件操作）
流 Stream是Node.js中的抽象接口,有不少Node.js对象实现自Stream. 所有的Stream对象都是EventEmitter 的实例. 例如:fs模块(用于读写操作文件的模块) fs ...
- 02-19 k近邻算法(鸢尾花分类)
[TOC] 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/nickchen121/ ...
- LeetCode_844-Backspace String Compare
输入两个字符串S和T,字符串只包含小写字母和”#“,#表示为退格键,判断操作完退格键剩下字符串是否相等例子:S = “ab#c", T = "ad # c” 返回true,剩下的字 ...
- Django2.1.3 urls.py path模块配置
learning_log/urls.py learning_logs/urls.py django2.0和1.x的区别是非常明显的,2.0开始使用path和re_path代替原来的url,而且用法有了 ...
- Python之单例模式的多种实现
单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...
- Cocos2d-x入门之旅[4]场景
我们之前讲了场景图(Scene Graph) 的概念,继续之前你先要知道 场景图决定了场景内节点对象的渲染顺序 渲染时 z-order 值大的节点对象会后绘制,值小的节点对象先绘制 HelloWorl ...
- AppBoxFuture: 服务模型的在线调试与性能监测
框架内的服务模型(ServiceModel)用于处理各类业务逻辑(如最简单的CRUD操作),在设计时以类似于伪代码的形式存在,发布时后端会通过Roslyn转换并编译为运行时代码.为了方便开发者作者 ...
- python编程系列---可迭代对象,迭代器和生成器详解
一.三者在代码上的特征 1.有__iter__方法的对象就是可迭代类(对象) 2.有__iter__方法,__next()方法的对象就是迭代器3.生成器 == 函数+yield 生成器属于迭代器, 迭 ...
- Codeforces--Books Exchange (hard version)
题目链接http://codeforces.com/contest/1249/problem/B2 .并查集思想,将数分成多个集合,每个集合的大小就是一轮的所需天数. Map[i]存储数据. flag ...
- ESP8266开发之旅 应用篇① 局域网应用 ——炫酷RGB彩灯
1.前言 这一篇,博主将教大家怎么去实现一个WiFi RGB彩灯. 先来一个博主已经实现功能的图片,如下: 当然,博主也拍了运行视频,请点击 传输门. 1.1 知识储备 ...