css解决内联元素间的空白间隔
在内联元素的父级元素上设置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解决内联元素间的空白间隔的更多相关文章
- css中font-size为0的妙用(消除内联元素间的间隔)
前言 <div> <input type="text"> <input type="button" value="提交& ...
- css 块元素、内联元素、内联块元素
块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- CSS 中的内联元素、块级元素以及display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS 中的内联元素、块级元素、display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS font-size: 0去除内联元素空白间隙
我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性.同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block.这样一来,有时在页面中会出现意外的空 ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- CSS基础:内联元素
简介 内联元素由于涉及到文本字体,读写方向,汉字和字母差异等诸多方面的影响,因此其盒模型比块级元素更加复杂,对于内联非替换元素,比如一行文本,主要由以下几种框构成: "em 框", ...
随机推荐
- 3.JavaScript-语法、关键保留字及变量
语法构成区分大小写标识符注释直接量字面量literal关键字保留字变量语法构成JavaScript 的语言核心 ECMAScript. 区分大小写ECMAScript 中的一切,包括变量.函数名和操作 ...
- Django 加载 app 中的urls
在 blog app 下创建 urls.py, 定义该 app 下自有的 url : new/story from blog import views from django.conf import ...
- 海量数据,大数据处理技术--【Hbase】
- 基于python的种子搜索网站-开发过程
本讲会对种子搜索网站的开发过程进行详细的讲解. 源码地址:https://github.com/geeeeeeeek/bt 项目开发过程 项目简介 该项目是基于python的web类库django开发 ...
- OPPO K3在哪里打开USB调试模式的完美方法
当我们使用pc链接安卓手机的时候,如果手机没有开启USB调试模式,pc则无法成功识别我们的手机,这个时候我们需要找解决方法将手机的USB调试模式打开,今天我们介绍OPPO K3如何开启USB调试模式的 ...
- linux子系统折腾记 (二)
今天一早起床,打开debian,居然出现 错误: 0x80070040 .不知道是怎么回事,网上有篇文章详细介绍了windows linux子系统,打算参考来做做:https://www.jiansh ...
- (五)图数据库数neo4j据备份与恢复
1.备份方式 neo4j目前有三种备份方式: (1)java在线备份,通过java程序可在neo4j启动状态下备份数据,也可远程备份(社区版本目前不支持) (2)neo4j-admin工具,可在neo ...
- Extjs renderer函数
昨天提到了改变grid中 行的背景颜色,其实还有一个更简单的方法,就是利用renderer:function(){}函数 renderer 函数是一个拦截者模式,用于改变渲染到单元格的值和样式. re ...
- CSS动画总结与呼吸灯效果
首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...
- python开发之路-LuffyCity
阅读目录 一.python基础语法 二.python基础之字符编码 三.python基础之文件操作 四.python基础小练习 五.python之函数基础 六.python之函数对象.函数嵌套.名称空 ...