如何去除inline-block的默认间距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>css inline-block间距怎么解决</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} li {
width: 100px;
height: 40px;
display: inline-block;
border: 1px solid red;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>XML</li>
<li>JSON</li>
</ul>
</body>
</html>
浏览器显示:
inline-block默认有间距
可以这样写:
<body>
<ul>
<li>
HTML</li><li>
CSS</li><li>
JavaScript</li><li>
JSON</li>
</ul>
</body>
浏览器显示:
元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。
如何去除inline-block的默认间距的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- inline-boock的默认间距
1 2 3 4 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></ ...
- 如何去除掉inline-block元素之间的默认间距
前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li& ...
- css去除ios文本框默认圆角
css去除ios文本框默认圆角 input, textarea {-webkit-appearance: none;}
- inline-block默认间距
inline-block元素默认会有间距 解决方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了.考虑到代码可读性,显然连成一行的写法是不可 ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- 去掉inline-block元素默认间距的几种方法
方法1:使用负margin值一般是-3px,部分浏览器可能不同,不太推荐使用. 方法2:去掉多余空格将元素紧挨着写去掉多余空格,但降低了可读性. 方法3:使用font-size:0在外层父元素加上fo ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
随机推荐
- 奇异值分解(SVD)(基础知识)
参考:https://www.cnblogs.com/pinard/p/6251584.html 参考:http://blog.csdn.net/u010099080/article/details/ ...
- Python3及Pycharm安装
1.首先去python官网下载相应版本的Python安装包.如下: 2.下载完成后解压,双击exe文件进行安装,看到如下界面:Install Now表示默认安装:Customize installat ...
- 1349 - View's SELECT contains a subquery in the FROM clause
mysql创建视图 报错1349 - View's SELECT contains a subquery in the FROM clause:: 原因创建视图的sql语句中有不支持子查询, 所以需要 ...
- DELPHI 调试IOS时出现 Please specify exact device preset UUID
右击设备DEVICE, 选择REFRESH刷新, 再重新选择一个设备即可.
- iOS设计模式之桥接模式
一,什么是桥接模式 定义 抽象出层次结构.上层抽象接口的职能,实现上层抽象接口的职能,层级间的通信协议(可以抽象为接口).桥接模式的目的,就是把抽象层次结构从具体的实现中分离出来,使其能够独立变更.抽 ...
- LRU management
LRU management 字典树用来查找值,实现map<string,int>操作 tips:tot必须从一开始QAQ #include<bits/stdc++.h> us ...
- [CSP-S模拟测试]:Equation(数学+树状数组)
题目描述 有一棵$n$个点的以$1$为根的树,以及$n$个整数变量$x_i$.树上$i$的父亲是$f_i$,每条边$(i,f_i)$有一个权值$w_i$,表示一个方程$x_i+x_{f_i}=w_i$ ...
- Java 设计模式之 策略模式
思维导图: 我们先来看 STRATEGY 设计模式的通俗解释: 跟不同类型的MM约会,要用不同的策略,有的请电影比较好,有的则去吃小吃效果不错,有的去海边浪漫最合适,但目的都是为了得到 MM 的芳心, ...
- python之面向过程,函数式编程,面向对象浅析
python编程有面向过程.面向函数.面向对象三种,那么他们区别在哪呢?这个问题,让我想起我在学习编程的时候,我的老师给我举的例子.分享给大家. 面向过程就是将编程当成是做一件事,要按步骤完成! 比如 ...
- vue2.0 之 douban (六)axios的简单使用
由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如 proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'htt ...