去除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" ...
随机推荐
- HDU 3062 简单的2-SAT问题
在2-SAT,最让我纠结的还是添加有向线段的函数了 void add_clause(int i,int a,int j,int b){ int m=2*i+a; int n=2*j+b; ...
- [luoguP2831] 愤怒的小鸟(状压DP)
传送门 感觉这题不是很难,但是很恶心. 说一下几点. 1.预处理出来每两个点所构成的抛物线能消除的猪的集合. 2.如果两个点横坐标相同,则不能构成抛物线 3.a >= 0 continue 4. ...
- 后缀排序(codevs 1500)
题目描述 Description 天凯是MIT的新生.Prof. HandsomeG给了他一个长度为n的由小写字母构成的字符串,要求他把该字符串的n个后缀(suffix)从小到大排序. 何谓后缀?假设 ...
- 虫食算(codevs 1064)
题目描述 Description 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简单的例子: 43#9865#045 + 8468#6 ...
- 【HDOJ6319】Ascending Rating(单调队列)
题意: 思路: 倒着来是因为这样可以维护每一个当过最大值的数,而正着不行 #include<cstdio> #include<cstring> #include<stri ...
- eclispe使用
eclipse 快捷键 ctrl+shif+o :去除多余引用 ctrl+shift+x :转大写 ctrl+shift+y :转小写 ctrl+o :查找方法 Alt+ ← :回 ...
- 修改flex chart中Legend的字体样式
最近在弄FLEX的图表, 发现CHART 中的Legend 的字体通过直接设置Style 并没有办法改变字体大小. google 了下, 发现了这个方法: 通过派生LegendItem类,并设置Leg ...
- oc温习六:预处理指令
预处理:分析程序前先处理的语句,它可以识别散布在程序中的特定语句.所有的预处理语句都适用“#”开头,这个符号必须是一行中的第一个非空字符. 预处理可以大概分为三类:文件包含.宏定义和条件编译. 1.文 ...
- oc温习三:常用函数
参考文章: 算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = rand()P; //0-49之间的随 ...
- POJ 1094 Sorting It All Out【拓扑排序】
题目链接: http://poj.org/problem?id=1094 题意: 给定前n个字母的大小关系,问你是否 根据前xxx个关系得到上升序列 所有关系都无法确定唯一的一个序列 第xxx个关系导 ...