如何去除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 ...
随机推荐
- [CF959D]Mahmoud and Ehab and another array construction task题解
解法 非常暴力的模拟. 一开始吧\(1 -> 2 \times 10^6\)全部扔进一个set里,如果之前取得数都是与原数组相同的,那么lower_bound一下找到set中大于等于它的数,否则 ...
- 二叉搜索树第k个节点
/* struct TreeNode { int val; struct TreeNode *left; struct TreeNode *right; TreeNode(int x) : val(x ...
- 从React渲染流程分析Diff算法
1.什么是虚拟DOM 在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM. 简单的说,其实所谓的virtu ...
- python tensorflow windows环境搭建体验
1. 需先安装python3.7,anaconda包管理器(类似java的maven),tensorflow,pycharm开发工具.文末附件下载地址. 2. 安装tensorflow,开始-Anac ...
- BurpSuite从下载安装到配置使用
为解决一个XSS安全问题,第一次使用BurpSuite,记录一下下载安装到配置使用的过程,希望能对第一次使用该工具的朋友有所帮助. 一.下载及安装 直接百度下载破解版,我下的版本是burpsuite_ ...
- rap安装mysql
1.yum仓库下载MySQL: yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch.rpm ...
- 16/8/21_PHP-有关类函数，this，static，面向对象思想介绍
class_exists():判断某个类是否存在(定义过) interface_existe():判断接口是否存在 get_class():获取某个对象的"所属类名" get_pa ...
- php用什么软件编程
准备好好学习学习PHP了吗?那么你首先应该考虑用什么开发工具(IDE).市面上有很多这类工具,收费的有,免费的也有,选择起来并不轻松. 如果你说PHP编程用基础的文本编辑软件就可以了,比如用记事本.是 ...
- Java-多线程第三篇3种创建的线程方式、线程的生命周期、线程控制、线程同步、线程通信
1.Java使用Thread类代表线程. 所有的线程对象必须是Thread类或其子类的实例. 当线程继承Thread类时,直接使用this即可获取当前线程,Thread对象的getName() ...
- spring-第十一篇之SpEL表达式
1.spring表达式语言,简称SpEL表达式语言