在内联元素的父级元素上设置font-size: 0px;即可。例如:

<div class="wrap">
<ul>
<li class="part1">1</li>
<li class="part2">2</li>
<li class="part3">3</li>
<li class="part4">4</li>
</ul>
</div> *{
margin:0;
padding:0;
}
html, body {
width: 100%;
height: 100%;
}
ul li {
list-style: none;
}
.wrap {
width: 600px;
margin: 0 auto;
margin-top: 100px;
}
.wrap ul {
font-size: 0px;
}
.wrap li {
width: 25%;
height: 150px;
display: inline-block;
}
.part1 {
background: red;
}
.part2 {
background: green;
}
.part3 {
background: pink;
}
.part4 {
background: tomato;
}

css解决内联元素间的空白间隔的更多相关文章

  1. css中font-size为0的妙用(消除内联元素间的间隔)

    前言 <div> <input type="text"> <input type="button" value="提交& ...

  2. css 块元素、内联元素、内联块元素

    块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...

  3. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  4. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  5. CSS 中的内联元素、块级元素以及display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  6. CSS 中的内联元素、块级元素、display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  7. CSS font-size: 0去除内联元素空白间隙

    我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性.同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block.这样一来,有时在页面中会出现意外的空 ...

  8. 从文档流来看内联元素和块元素的css排版

    veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

  9. CSS基础:内联元素

    简介 内联元素由于涉及到文本字体,读写方向,汉字和字母差异等诸多方面的影响,因此其盒模型比块级元素更加复杂,对于内联非替换元素,比如一行文本,主要由以下几种框构成: "em 框", ...

随机推荐

  1. 部署 apply plugin: 'realm-android'

    我在build.gradle中添加 apply plugin: 'realm-android' //依赖Realm数据库,插件化依赖  这个后,同步,清理,运行的时候报 应该在build.gradle ...

  2. 关于 python中的 TKinterlistbox 控件加横竖滚动条

    上代码 win=tkinter.Tk() scorllbar=tkinter.Scrollbar(win) scorllbar.pack(side=tkinter.RIGHT,fill=tkinter ...

  3. xtrabackup备份mysql数据库方法

    1.安装 xtrabackup 工具包 下载percona yum源 https://www.percona.com/redir/downloads/percona-release/redhat/pe ...

  4. Java实现遍历N级树形目录结构

    最近挺忙,一直在做项目,然后有个树形目录结构需要返回给前端,这里给大家说一下实现的思路. 具体达到的效果类似: 一级目录A: 二级目录A: 三级目录: 四级目录: 文件.txt 二级目录B: 文件1. ...

  5. java 浅复制 代码

    1  类实现Cloneable接口 2  重写clone()方法 3  类变量引用类型无法复制 class Dog extends Pet implements Cloneable{ int c; i ...

  6. [十二省联考2019]D2T2春节十二响

    嘟嘟嘟 这题真没想到这么简单-- 首先有60分大礼:\(O(n ^ 2logn)\)贪心.(我也不知道为啥就是对的) 然后又送15分链:维护两个堆,每次去堆顶的最大值. 这时候得到75分已经很开心了, ...

  7. Ubuntu server 16.04的安装 以及配置(服务器版)

    1.在电脑上下载最新版本的Ubuntu服务器ISO映像,刻录到CD或创建一个可启动的USB盘. 2.视情况而定,进入到服务器的boot界面,把cd或者usb设置为启动第一项 3.开始安装   1)Ub ...

  8. Linux SHELL中sh和bash的区别

    什么是SHELL? shell的中文意思就是贝壳,其实比较类似于我们内核的壳.简而言之就是只要能够操作应用程序的接口都能够称为SHELL.狭义的shell指的是命令行方面的软件,广义的SHELL则包括 ...

  9. 四十二、在线预览pdf文件

    //文档在线观看 checkWoc(type, id, taskId, smsId, stsId) { if(type == "zip" || type == "7z&q ...

  10. Linux基础优化与安全归纳总结

    一名运维工程师在运维岗位上时间久了,就会发现Linux优化的重要性,同时会给运维工作带来很多的便利性.本人逐渐认识到了这一点,所以特意在工作闲暇之余,通过阅读Linux相关书籍及向同事.同行高手咨询, ...