说一说inline-block的奇葩之处
今天本来想聊一下margin和padding,但是当我给div加了一个display:inline-block之后,发现一个问题:
.box_demo{border: 1px solid #333;width: 80px;display: inline-block;}
<div class="box_demo">
box1
</div>
<div class="box_demo">
box2
</div>
发现没有,中间赫然有着4px的间距!!之前居然一直都没有注意到!!!
我想着是不是只有block元素才有的问题,看了一下inline元素,依然存在这个问题,这个引起了我的注意,在网上搜罗了一番,渐渐发现,这确实是一个坑。
称 号:“inline-block元素间间隙问题”。
现 象:如上。
产生原因:换行、空格导致。
解决办法:(1)去掉换行;
优点:此解法so easy;缺点:代码洁癖者哭了;
(2)使用负margin值;
优点:此解法so easy;缺点:字体大小不同,他们的间隙也不同,到底该负margin多少 %>_<%;
(3)使用font-size:0;
CSS:
.wrap{font-size:;}
.box_demo{border: 1px solid #333;
width: 80px;
display: inline-block;
font-size: 16px;}
HTML:
<div class="wrap">
<div class="box_demo">
box1
</div>
<div class="box_demo">
box2
</div>
</div>
截图:
解铃还须系铃人,既然这个间隙是由于空格等文本类的问题产生的,那好,我让你的字体大小为零,然后让该显示的字体还设置为16px,间隙就不见了。
优点:此解法so easy;缺点:可能会存在一些兼容性问题;
看到这里,关于这个奇葩问题的所有核心内容以就完了,你又成功的识破了一个坑,并知道如何填补它,如果想继续深一步了解,可以继续往下看。
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
其实这个问题还可以围绕着这个“由于文本产生的问题”,还可以有其他解法:
比如:(1)使用letter-spacing;
修改上述CSS:
.wrap{letter-spacing: -4px;}
.box_demo{border: 1px solid #333;
width: 80px;
display: inline-block;
letter-spacing:;}
优点:此解法so easy;缺点:不兼容(Opera浏览器下需设置为:-8px);
(2)使用word-spacing;
方法同上,只用把letter改为word即可;
优缺点同上;
还有一个非常重要的问题,上述解法对于低于IE7的兼容性,有兴趣的可以点击下边的链接:
http://demo.doyoe.com/css/inline-block-space/
说一说inline-block的奇葩之处的更多相关文章
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【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& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
随机推荐
- js窗口边缘滑入滑出效果-初级代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- setImageBitmap和setImageResource
同样的布局文件,小分辨率手机: 1.使用setImageBitmap设置时,出现如下现象: 2.使用setImageResource时,图片显示正常 原因: setImageResource(id) ...
- uva 10622
http://vjudge.net/contest/140673#problem/H 求某个数字(最大到10^9,可为负值)写成完全p次方数的指数p是多少 分析: 先进行唯一分解,之后p整除各个素因子 ...
- 初识Winform , 还好没喜欢上控制台
虽然没听的太懂, 不过还是写点东西吧. 我呢, 就跟着这本书写了个学生管理系统 前面刚会了SQLserver, 所以这个学生管理系统需要连上数据库, 毕竟学了不用天诛地灭 既然需要连接数据库, 就要用 ...
- 面试题一 链表中倒数第k个结点
void findLastK(LinkedNode head, int k, int n){ if (head == NULL || k == 0) return; LinkedNode t1 = h ...
- [原创]cocos2d-x研习录-第三阶 特性之触屏
游戏跟视频最大的区别就是互动,而手游(基于智能手机)主要靠触摸屏幕.重力传感和虚拟键盘等方式实现互动.这里主要记录Cocos2D-x对玩家触屏操作的处理. 在Cocos2D-x中触屏分为单点触屏和多点 ...
- 如何让WordPress支持上传更多文件类型
如何让WordPress支持上传更多文件类型 可以在functions.php中这样写: 1 2 3 4 5 6 7 8 9 add_filter('upload_mimes', 'wpdit_f ...
- Cacti-安装和使用详解
Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.Cacti是通过 snmp get来获取数据,使用 RRDtool绘画图形,而且你完全可以不需要了解RR ...
- 查杀 oracle sql 卡死的进程
--查出SID名字select * from v$access where object ='PKG_SMSSEND_PROC';--通过sid查出spidselect spid,osuser, s ...
- Java输入输出流(一)——常用的输入输出流
1.流的概念:在Java中,流是从源到目的地的字节的有序序列.Java中有两种基本的流--输入流(InputStream)和输出流(OutputStream). 根据流相对于程序的另一个端点的不同,分 ...