清除display:inline-block元素换行符间隙font-size:0;
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;的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- 使用(Unicode字符)让inline水平元素换行
为了实现上面效果: <dl> <dt>提问:</dt><dd>为什么没有男朋友?</dd> </dl> <dl ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- display inline or block
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- float:left 与display:inline的具体区别?
设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素.但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:le ...
- display:block inline-block inlined的区别
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
随机推荐
- MySQL 存储过程 (3)
以下介绍下像数据库循环插入数据操作 第一步:建立存储过程用到的信息表
- GCJ Qualification Round 2016 B题
经典的翻饼问题,直接做:从下往上看,已翻好的饼忽略掉:从上往下,连续的已翻好的一起翻过来:整个翻过来. /* * Author : ben */ #include <cstdio> #in ...
- scrollify 全屏滚动插件
使用 1.引入文件 <script src="js/jquery.min.js"> </script> <script src="js/jq ...
- J++ C#
J++几乎有与Java相同的编程语言和虚拟机.
- 前后端通吃的单元测试---mocha
git clone https://github.com/shenggen1987/mocha-demo.git npm install front 前台测试代码 backend 后台测试代码 先安装 ...
- 分布式锁(Redis实现)
1.分布式锁解决方案 1.采用数据库 不建议 性能不好 jdbc 2.基于Redis实现分布式锁(setnx)setnx也可以存入key,如果存入key成功返回1,如果存入的key已经存在了,返回 ...
- H264 各种profile
关键字:H264 ,base profile, main profile, extend profile, high profile. 提到High Profile H.264解码许多人并不了解,那么 ...
- Django_model进阶
Django-model进阶 QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. >>> Ent ...
- BZOJ_1004_[HNOI2008]Cards_burnside+DP
BZOJ_1004_[HNOI2008]Cards_burnside+DP Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问 ...
- BZOJ_2716_[Violet 3]天使玩偶&&BZOJ_2648_SJY摆棋子_KDTree
BZOJ_2716_[Violet 3]天使玩偶&&BZOJ_2648_SJY摆棋子_KDTree Description 这天,SJY显得无聊.在家自己玩.在一个棋盘上,有N个黑色棋 ...