去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下:
<style>
div {
color: #fff;
padding: 25px 50px;
} .inline-f00 {
display: inline;
background: #f00;
} .inline-0f0 {
display: inline;
background: #0f0;
} .inline-block-00f {
display: inline-block;
background: #00f;
} .inline-block-000 {
display: inline-block;
background: #000;
}
</style> <div class="inline-f00">inline</div>
<div class="inline-0f0">inline</div> <div class="inline-block-00f">inline-block</div>
<div class="inline-block-000">inline-block</div>
运行代码的效果:
为什么会出现间距呢??真正意义上的水平呈现的行内元素间,换行显示或空格分隔的情况下会有间距。
既然知道了出现间距的原因,接下来讨论去除行内元素之间的间距,推荐几种通用的方法。
去除空格或者换行
去除行内元素之间的空格和换行,可以把代码写成这个样子,虽然丑了点,但是得到了想要的效果,
<style>
div {
color: #fff;
padding: 25px 50px;
} .inline-f00 {
display: inline;
background: #f00;
} .inline-0f0 {
display: inline;
background: #0f0;
} .inline-block-00f {
display: inline-block;
background: #00f;
} .inline-block-000 {
display: inline-block;
background: #000;
}
</style> <div class="inline-f00">inline</div><div class="inline-0f0">inline</div><div class="inline-block-00f">inline-block</div><div class="inline-block-000">inline-block</div>
也可以使用注释去掉空格和换行:
<!-- 下面的注释是重点 -->
<div class="inline-f00">inline</div><!--
--><div class="inline-0f0">inline</div><!--
--><div class="inline-block-00f">inline-block</div><!--
--><div class="inline-block-000">inline-block</div>
还可以:
<div class="inline-f00">inline</div
><div class="inline-0f0">inline</div
><div class="inline-block-00f">inline-block</div
><div class="inline-block-000">inline-block</div>
font-size: 0
设置父元素的font-size:0,子元素设置字体大小为正常字体大小。
<style>
div {
color: #fff;
padding: 25px 50px;
} .inline-f00 {
display: inline;
background: #f00;
} .inline-0f0 {
display: inline;
background: #0f0;
} .inline-block-00f {
display: inline-block;
background: #00f;
} .inline-block-000 {
display: inline-block;
background: #000;
} .font-size-0 {
font-size: 0;
} .font-size-0 div {
font-size: 16px;
}
</style> <div class="font-size-0">
<div class="inline-f00">inline</div>
<div class="inline-0f0">inline</div> <div class="inline-block-00f">inline-block</div>
<div class="inline-block-000">inline-block</div>
</div>
float:left/right
行内元素设置为浮动元素,行内元素之间的间距会消失。
<style>
div {
color: #fff;
float: left;
padding: 25px 50px;
} .inline-f00 {
display: inline;
background: #f00;
} .inline-0f0 {
display: inline;
background: #0f0;
} .inline-block-00f {
display: inline-block;
background: #00f;
} .inline-block-000 {
display: inline-block;
background: #000;
}
</style> <div class="inline-f00">inline</div>
<div class="inline-0f0">inline</div> <div class="inline-block-00f">inline-block</div>
<div class="inline-block-000">inline-block</div>
上面三种去除间距方法的效果:
特殊情况
一种特别的情况,相邻inline元素至少一个不包含内容的时候,不存在间距
<div style="display: inline; background: #f00; padding: 25px 50px;"></div>
<div style="display: inline; background: #000; padding: 25px 50px;"></div>
效果:
去除行内(inline/inline-block)元素之间的间距的更多相关文章
- 原生js去除行内样式
概述 今天我用js给dom元素设置样式,碰到了一些问题,记下来供以后开发时参考,相信对其他人也有用. 心得 js加上class: $dom.classList.add('some-class'); j ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- img、input到底是行内还是块级元素?
一.img.input属于行内替换元素.height/width/padding/margin均可用.效果等于块元素. 行内非替换元素,例如, height/width/padding to ...
- HTML inline 与block元素
行标签:内容撑开宽度,不可以控制宽和高,它的宽和高随标签里的内容而改变 块标签:撑满行(默认) ,可以用样式控制其宽和高 但行标签 img,textarea,select,input 是可以设置宽和高 ...
- IE6 行内定义成块元素后高度失效
问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...
- span元素之间的间距
去除inline-block元素间间距的N种方法- zhangxinxu http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space- ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- 行内块inline-block元素之间出现空白间隙原因及解决办法
首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
随机推荐
- HDU1518 Square(DFS,剪枝是关键呀)
Square Time Limit : 10000/5000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submi ...
- ACM: POJ 3259 Wormholes - SPFA负环判定
POJ 3259 Wormholes Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- 20161007 NOIP 模拟赛 T1 解题报告
排序 3.1 题意描述 众所周知,熟练掌握至少一种排序算法是参加NOIP的必备技能.常见的排序算法有冒泡 排序.归并排序.快速排序.奇偶排序.猴子排序.梳排序.鸡尾酒排序.臭皮匠排序等. 在这里,介绍 ...
- 【BZOJ】2595: [Wc2008]游览计划
题意 \(n * m\)的网格,如果\(a_{i, j} = 0\)则表示景点,否则表示这里的需要的志愿者人数.求一种安排志愿者的方案使得所有景点连通且志愿者最少. 分析 本题可以插头dp,然而有一个 ...
- HDU 4431 Mahjong(模拟题)
题目链接 写了俩小时+把....有一种情况写的时候漏了...代码还算清晰把,想了很久才开写的. #include <cstdio> #include <cstring> #in ...
- Vijos 1092 全排列
题目链接 来个水题..难得的1Y. #include <cstdio> #include <cstring> #include <iostream> using n ...
- Window对象简介
Window对象是JavaScript层级中的顶层对象. Window对象表示一个浏览器窗口或一个框架,它在<body>或<frameset>出现时被自动创建. Window对 ...
- [转载]TableView详解
一.建立 UITableView DataTable = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 420)]; [Data ...
- AJAX.JSONP 跨域
var Request = { timeout: 10 * 1000, // 10秒超时 status: 10, statusenum: { Wait: 10 ...