font-size:0; 清除display:inline-block元素换行符间隙

看例子:

css:

.dd {background-color: #ddd;}
.dd2 {background-color: #ddd; font-size: 0;}
.dd li {display: inline-block; padding: 8px 12px; background-color: #777; font-size: 14px;}

html:

<ul class="dd">
<li>123</li>
<li>1234</li>
<li>123456</li>
<li>123456789</li>
</ul>
<br>
<ul class="dd dd2">
<li>123</li>
<li>1234</li>
<li>123456</li>
<li>123456789</li>
</ul>
<br>
<div style="font-size: 0;">
<img src="data:images/s_banner03.gif">
<img src="data:images/s_banner02.gif">
</div>

效果图:

清除display:inline-block元素换行符间隙font-size:0;的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. 使用(Unicode字符)让inline水平元素换行

      为了实现上面效果: <dl>     <dt>提问:</dt><dd>为什么没有男朋友?</dd> </dl> <dl ...

  3. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  4. display inline or block

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  5. float:left 与display:inline的具体区别?

    设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素.但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:le ...

  6. display:block inline-block inlined的区别

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  7. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  8. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  9. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

随机推荐

  1. ASP.NET页面之间传值的几种方式

    1.  QueryString 当页面上的form以get方式向页面发送请求数据时,web server将请求数据放入一名为QEURY_STRING的环境变量中,QeueryString方法从这个变量 ...

  2. NS3网络仿真(11): ARP

    快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 ARP(Address ResolutionProtocol,地址解析协议)协议的基本功能就是通过 ...

  3. gradle找不到java目录里的mybatis的xml文件

    因为idea只编译java,gradle也默认只编译java,所以xml被忽略了. idea目前不知道如何修改,gradle修改时,需要把xml文件加上,不过gradle修改了只对gradle起作用, ...

  4. ECMAscript 没有对该方法进行标准化,因此反对使用它。 es 日期格式化

    JavaScript substr() 方法 http://www.w3school.com.cn/jsref/jsref_substr.asp 注释:substr() 的参数指定的是子串的开始位置和 ...

  5. Golang RPC 性能测试

    Golang RPC 性能测试 | KDF5000 http://kdf5000.com/2017/03/28/Golang-RPC-性能测试/

  6. rule-based optimizer cost-based optimizer

    SQL processing uses the following main components to execute a SQL query: The Parser checks both syn ...

  7. Spring boot框架项目,使用maven命令将配置文件打包到jar包外,项目运行读取jar外配置文件

    1.1      在eclipse中配置maven命令 Mvn -e clean package -Ptest -DskipTests=true 1.1.1    执行命令之后得到jar 1.2    ...

  8. (深入理解计算机系统)AT&T汇编指令

    AT&T汇编指令学习(GCC) 寄存器命名原则: 相比inter语法,AT&T语法格式要求所有的寄存器都必须加上取值符"%". 操作码命令格式: 源/目的操作数顺序 ...

  9. LightOJ1220 —— 质因数分解

    题目链接:https://vjudge.net/problem/LightOJ-1220 1220 - Mysterious Bacteria    PDF (English) Statistics ...

  10. C++中指针和指针变量

    指针和指针变量的理解: #include<iostream> using namespace std; int main() { int n; int * m; m = &n; n ...