去除inline-block的间隙
产生间隙的原因就是标签之间的空格,去除的方法:
1 设置父元素的font-size:0;空格字符的宽高都为0,
<div class="demo1 demo2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
2 inline-block元素在一行上,不换行
<div class="demo1">
<span></span><span></span><span></span><span></span>
</div>
3 inline-block元素换行,但是上一个标签的结束标签与下一个标签的开始标签在一行上
<div class="demo1">
<span></span><span>
</span><span>
</span><span>
</span>
</div>
或者
<div class="demo1">
<span></span
><span></span
><span></span
><span></span>
</div>
4 在上一个标签的结束标签和下一个标签的结束标签之间加上注释,消除空格的影响
<div class="demo1">
<span></span><!--
--><span></span><!--
--><span></span><!--
--><span></span>
</div>
5 设置margin负值:margin负值的大小与上下文的字体和文字大小相关
或者设置letter-spacing 或者word-spacing
去除inline-block的间隙的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 去除inline-block之间的间隙
在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - <去除inline-block元素间的空隙>的说法,这个间隙是4px或者8px ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- Display属性学习总结
HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
随机推荐
- bzoj 1432 [ZJOI2009]Function 思想
[bzoj1432][ZJOI2009]Function Description Input 一行两个整数n; k. Output 一行一个整数,表示n 个函数第k 层最少能由多少段组成. Sampl ...
- react.js 组件之间的数据传递props
/* *属性 * 1.如何传递属性 * 2.属性和状态区别和联系 * * 3.子组件都有一个props属性对象 * * 4.单线数据流(只能从父组件流向子组件,就是在父组件定义一个属性,子组件可以通过 ...
- 显示倒计时的Button按钮
package com.pingyijinren.helloworld.activity; import android.os.CountDownTimer; import android.suppo ...
- Python 列表的复制操作
2013-10-18 10:07:03| import copy a = [1,2,3,['a','b']] b = a c = a[:] d = copy.copy(a) e = copy.de ...
- 毕业bg--hdu1881(01背包)
http://acm.hdu.edu.cn/showproblem.php?pid=1881 01 背包 先按发起人离开的时间从小到大排序 然后再套01背包的模板 #include <iost ...
- loj6172 Samjia和大树(树形DP+找规律)
题目: https://loj.ac/problem/6172 分析: 首先容易得出这样的dp式子 然后发现后面那个Σ其实是两段区间,可以用总和减去中间一段区间表示,所以只要维护个前缀和就ok了 这样 ...
- C# 读自己的资源文件
Assembly assm = this.GetType().Assembly;//Assembly.LoadFrom(程序集路径); foreach (string resName in assm. ...
- 一天教你入门struts2
写在前面 自己也是一个java和java web的菜鸟.之前没有接触过java web方面的开发 想通过一个小项目,来熟悉struts2的开发流程 一个有趣的想法源于教研室项目上的一个功能实现–自己主 ...
- 区分Integer.getInteger和Integer.valueOf、Integer.parseInt() 的使用方法
Integer类有两个看起来很类似的静态方法,一个是Integer.getInteger(String),另外一个是Integer.valueOf(String).如果只看方法名称的话,很容易将这两个 ...
- 用户代码未处理 UpdateException
无法更新 EntitySet"Project_project",由于它有一个 DefiningQuery.而 <ModificationFunctionMapping> ...