在内联元素的父级元素上设置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. MyBatis学习---整合SpringMVC

    [目录]

  2. deepin linux 学习笔记(二)——文本编辑器

    目录 deepin linux 学习笔记(二)--文本编辑器 前言 nano 小巧的命令行编辑器 通用 编辑 定位 排版 配置 vim 思路独特的超级编辑器 命令模式 插入模式 底线模式(末行模式) ...

  3. Html5 Canvas介绍

    1. 获取绘图上下文 var mycanvas = document.getElementById('mycanvas'); var context = mycanvas.getContext('2d ...

  4. IDEA启动tomcat乱码

    1.找到IDEA安装目录 2.找到2个文件 3.编辑,在最后一行加入 -Dfile.encoding=UTF-8 4.修改IDEA里tomcat内得编码 5.修改IDEA中tomcat中,startu ...

  5. Windows中通过命令行启动打开Service 管理工具

    经常需要打开Services 管理工具操控Service 的启动,停止. 通过控制面板 --> 管理工具 -->Service  太慢. 学到一个快捷方式. windows + R  启动 ...

  6. Ubuntu 16.04 安装垃圾清理工具 BleachBit

    BleachBit 可以清理系统缓存文件, 清理磁盘垃圾. 首先下载最新版 deb安装包,默认下载到Downloads 中, 下载链接: https://www.bleachbit.org/downl ...

  7. keil 中报错和警告提示解决办法

    1.warning: #1-D: last line of file ends without a newline 解决办法:在文件最后一行加入一个回车. 2.error: #134: expecte ...

  8. 浅论Python密文输入密码的方法

    近来做作业(老男孩那个9.9元的训练营)我想写一个装逼点的密文输入密码,类似于: 这个东西我先前实现过,忘了获取一个字节的方法是什么,于是去网上找,发现网上的实现方式大部分都有问题. 一.网上(百度) ...

  9. QPalette

    Help on class QPalette in module PyQt5.QtGui: class QPalette(sip.simplewrapper) |  QPalette() |  QPa ...

  10. 二、PHP基本语法 - PHP零基础快速入门

    我们日常生活中,有些人使用普通话交流,有些人使用家乡话.类比到计算机的世界里,PHP 是人与计算机沟通的语言之一. 既然是语言,那就必须遵循一定的语法规则.譬如 A 向 B 表白,A 会对 B 说:& ...