在内联元素的父级元素上设置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. Dotnetcore 开发速记

    1.System.InvalidOperationException:"Internal connection fatal error." 全球固定模式,坑爹 https://gi ...

  2. MongoDB自学(3)

    MongoDB关系:MongoDB的关系表示多个文档之间在逻辑上的相互联系.文档之间可以通过嵌入和引用来建立联系.关系:1:11:NM:1M:N 嵌入式:{ id:11;name:嘻嘻嘻;addres ...

  3. Spark 基本函数学习笔记一

      Spark 基本函数学习笔记一¶ spark的函数主要分两类,Transformations和Actions. Transformations为一些数据转换类函数,actions为一些行动类函数: ...

  4. python使用rabbitMQ介绍二(工作队列模式)

    一模式介绍 第一章节的生产-消费者模式,是非常简单的模式,一发一收.在实际的应用中,消费者有的时候需要工作较长的时间,则需要增加消费者. 队列模型: 这时mq实现了一下几个功能: rabbitmq循环 ...

  5. redis -list

    列表的元素类型为string 按照插入顺序排序 增加: 例如: 从列表的 左侧 加入数据 a b c lpush 键 a b c 显示:1“c"2"b"3"c& ...

  6. c/c++ 继承与多态 文本查询的小例子(智能指针版本)

    为了更好的理解继承和多态,做一个文本查询的小例子. 接口类:Query有2个方法. eval:查询,返回查询结果类QueryResult rep:得到要查询的文本 客户端程序的使用方法: //查询包含 ...

  7. DES加密算法应用:分组加密模式

    通常,大多数的分组加密算法都是把数据按照64位分组的方式进行加密和解密.但是几乎所有的加密工作所涉及的数据量都远远大于64位,因此就需要不断地重复加密过程,直到处理完所有的分组.这种分组加密中所涉及的 ...

  8. Centos7上安装单机版redis

    Centos 7 上安装单机版redis Redis 官网下载 https://redis.io/download 1. 下载.解压.安装 cd /usr/local #wget http://dow ...

  9. kerberos环境下spark消费kafka写入到Hbase

    一.准备环境: 创建Kafka Topic和HBase表 1. 在kerberos环境下创建Kafka Topic 1.1 因为kafka默认使用的协议为PLAINTEXT,在kerberos环境下需 ...

  10. python接口自动化-post请求4

    云盘登录实操案例: 代码参考: # coding:utf-8 import requests ''' https的请求相对于http安全级别高,需要验证SSL证书 import urllib3 使用这 ...