清除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 ...
随机推荐
- C语言的面向对象设计之 X264,FFMPEG 架构探讨
FFMPEG架构分析 使用面向对象的办法来设想这样一个编解码库,首先让人想到的是构造各种编解码器的类,然后对于它们的抽象基类确定运行数据流的规则,根据算法转换输入输出对象. 在实际的代码,将这些编解码 ...
- centos6.4中文输入法安装和切换(转载)
1.用root登录,或者切换到root账户(su root): 2.yum install "@Chinese Support"; 3.exit: 4.System→prefere ...
- 解决Android Studio下Element layer-list must be declared问题
近期将一个项目从Eclipse转到Android Studio. 项目中使用了环信demo中的一些xml资源,转换后发现color资源目录下诸如layer-list或者shape等标签报Element ...
- WinCE下使用C#的几个小技巧
1.我们知道,在使用Windows的开发机上用C#启动一个外部程序的方法有很多,但这些方法用在使用WinCE的目标工控机上都无能为力,现在小嫚儿以打开一个IE为例,介绍如何在WinCE下使用C#来打开 ...
- 7-2 jmu-python-猜数游戏(10 point(s)) 【python】
7-2 jmu-python-猜数游戏(10 point(s)) 用户从键盘输入两个整数,第一个数是要猜测的数n(<10),第二个数作为随机种子,随机生成一个1~10的整数,如果该数不等于n,则 ...
- php钩子技术
通过对钩子技术的理解,下面把自己对钩子技术的总结如下:"钩子就是在调用php核心功能代码的同时可以在不修改核心代码的同时,更改核心代码的行为";具体模拟实现如下 /** * php ...
- python基础知识踩点
1.注释 在python中,注释是以任何存在于#右侧的文字,其主要作用是写给程序读者看的笔记. 例如 单行注释 >>print("hello world") #这是一个 ...
- elasticsearch 中文分词(elasticsearch-analysis-ik)安装
elasticsearch 中文分词(elasticsearch-analysis-ik)安装 下载最新的发布版本 https://github.com/medcl/elasticsearch-ana ...
- codeforces B. Marathon 解题报告
题目链接:http://codeforces.com/problemset/problem/404/B 题目意思:Valera 参加马拉松,马拉松的跑道是一个边长为a的正方形,要求Valera从起点( ...
- 【C/C++】产生随机数
#include<iostream> #include<Ctime> #include<Cstdlib> using namespace std; //产生n个st ...