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. C语言的面向对象设计之 X264,FFMPEG 架构探讨

    FFMPEG架构分析 使用面向对象的办法来设想这样一个编解码库,首先让人想到的是构造各种编解码器的类,然后对于它们的抽象基类确定运行数据流的规则,根据算法转换输入输出对象. 在实际的代码,将这些编解码 ...

  2. centos6.4中文输入法安装和切换(转载)

    1.用root登录,或者切换到root账户(su root): 2.yum install "@Chinese Support"; 3.exit: 4.System→prefere ...

  3. 解决Android Studio下Element layer-list must be declared问题

    近期将一个项目从Eclipse转到Android Studio. 项目中使用了环信demo中的一些xml资源,转换后发现color资源目录下诸如layer-list或者shape等标签报Element ...

  4. WinCE下使用C#的几个小技巧

    1.我们知道,在使用Windows的开发机上用C#启动一个外部程序的方法有很多,但这些方法用在使用WinCE的目标工控机上都无能为力,现在小嫚儿以打开一个IE为例,介绍如何在WinCE下使用C#来打开 ...

  5. 7-2 jmu-python-猜数游戏(10 point(s)) 【python】

    7-2 jmu-python-猜数游戏(10 point(s)) 用户从键盘输入两个整数,第一个数是要猜测的数n(<10),第二个数作为随机种子,随机生成一个1~10的整数,如果该数不等于n,则 ...

  6. php钩子技术

    通过对钩子技术的理解,下面把自己对钩子技术的总结如下:"钩子就是在调用php核心功能代码的同时可以在不修改核心代码的同时,更改核心代码的行为";具体模拟实现如下 /** * php ...

  7. python基础知识踩点

    1.注释 在python中,注释是以任何存在于#右侧的文字,其主要作用是写给程序读者看的笔记. 例如 单行注释 >>print("hello world") #这是一个 ...

  8. elasticsearch 中文分词(elasticsearch-analysis-ik)安装

    elasticsearch 中文分词(elasticsearch-analysis-ik)安装 下载最新的发布版本 https://github.com/medcl/elasticsearch-ana ...

  9. codeforces B. Marathon 解题报告

    题目链接:http://codeforces.com/problemset/problem/404/B 题目意思:Valera 参加马拉松,马拉松的跑道是一个边长为a的正方形,要求Valera从起点( ...

  10. 【C/C++】产生随机数

    #include<iostream> #include<Ctime> #include<Cstdlib> using namespace std; //产生n个st ...