说inline-block(行内区块元素)之前，先说下他另外的2个兄弟

display:inline; 内联元素，简单来说就是在同一行显示。他没有高度，给内联元素设置width和height是没效果的。
display:block; 块级元素，简单来说就是就是有换行，会换到第二行。同时可以设置宽高。

inline-block详解

inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生了元素间的空隙。（这句话下面会用例子解释）

还是似懂非懂吗，来看下例子吧，保证就懂了

详细应用

我在了解inline-block之前,我的导航栏一直采用float浮动来达到横向排列的目的，然而浮动是会产生副作用的，需要清除浮动,相对变得麻烦了。使用inline-block将会变得很方便

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width: 100%;

            background: yellow;

            height: 100px;

            text-align: center;

            line-height: 100px;

        }

        a{

            color:#fff;

            text-decoration: none;

            display: inline-block;

            width: 100px;

            height: 30px;

            line-height: 30px;

            background: red;

        }

    </style>

</head>

<body>

    <div>

        <a href="">我是a1</a>

        <a href="">我是a2</a>

        <a href="">我是a3</a>

        <a href="">我是a4</a>

    </div>

</body>

</html>

效果

有没有发现，每个a之间都会有一个空隙，这个空隙是因为块级元素会换行，就有换行，.HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙

如何取消inline-block产生的间隙

我认为有2种方法

第一种

使用负值的margin各个浏览器的负值也不相同，才能完美贴合

浏览器 margin值(左右)
火狐 margin:-4px
chrome margin:-3px
IE margin:-2px

第二种

在父元素的css中设置word-spacing负值

浏览器 word-spacing
火狐 word-spacing:-8px
chrome word-spacing:-6px
IE word-spacing:-4px

效果

兼容性

很遗憾，IE7以下的浏览器不支持inline-block，但并非完全不支持

解决IE6、IE7兼容性的方法：

1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。

2、直接设置display:inline，使用zoom:1触发layout。

兼容所有浏览器的方法是：

display:inline-block;

*display:inline;

*zoom:1;

兼容性解决方法参考自charling：inline-block的兼容性问题

inline-block(行内区块元素)的详解和应用的更多相关文章

  1. （转） html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  2. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  3. CSS 块状元素和内联元素的详解

    我们先来分析一下块级元素.内联级元素的定义和解析:  块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&q ...

  4. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  5. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  6. HTML行内元素、块状元素、行内块状元素的区别

    HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种.首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换: (1)display:inline;转换为行内 ...

  7. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  8. __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block

    1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...

  9. HTML行内元素、块状元素和行内块状元素的区分

    HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...

随机推荐

  1. bzoj2561

    对于新加入的边,必须要既可能在最小生成树上也可能在最大生成树上我们先对于最小生成树考虑根据kruskal的理论,不难发现,u--v 长度为L的边可能出现在最小生成树上就是说删边剩下的比L小的边一定不能 ...

  2. LA 4726 再看斜率优化

    感觉最近一批解题报告没写,现在慢慢补吧,算是noip前攒攒rp了 首先感到深深的自责,因为之前对斜率优化没有深入的理解,只是记住了一般步骤,并没有完全了解为什么这样做 先就这道题目而言 首先这种序列题 ...

  3. hdu-2768-Cat vs. Dog(二分图-最大匹配数)

    题意: 有猫C个和狗D个,有V个投票人,每个人喜欢猫讨厌狗或则喜欢狗讨厌猫! 求最多能满足多少投票人. 分析: 两个投票者矛盾的话就连一条边,总数减去最大匹配数/2就是要求的答案 // File Na ...

  4. 安装Maven、nexus

    一.软件包版本 jdk:jdk1.7.0_79 maven:apache-maven-3.3.3-bin.tar.gz nexus:nexus-webapp-2.8.0-05.war 二.安装mave ...

  5. POJ 3468 A Simple Problem with Integers(详细题解) 线段树

    这是个线段树题目,做之前必须要有些线段树基础才行不然你是很难理解的. 此题的难点就是在于你加的数要怎么加,加入你一直加到叶子节点的话,复杂度势必会很高的 具体思路 在增加时,如果要加的区间正好覆盖一个 ...

  6. 平衡树（Splay）：Splaytree POJ 3580 SuperMemo

    SuperMemo         Description Your friend, Jackson is invited to a TV show called SuperMemo in which ...

  7. 【模拟】Codeforces 710B Optimal Point on a Line

    题目链接: http://codeforces.com/problemset/problem/710/B 题目大意: 给N个点的坐标,在X轴上找到最靠左的点使得这个点到N个点距离之和最小. 题目思路: ...

  8. 《Mathematical Olympiad——组合数学》——染色问题

    恢复  继续关于<Mathematical Olympiad——组合数学>中问题的分析,这一篇文章将介绍有关染色的问题. 问题一: 将一些石头放入10行14列的矩形方格表内,允许在每个单元 ...

  9. phantomjs截图的实践

        年前也做了一些东西,由于过年只顾疯了,也没有整理,年后补上把~ 今天整理一下个phantomjs截图实践中遇到的问题.           最近做的一个项目,需要在首页展示已经做的一些项目的缩 ...

  10. 吉哥系列故事--完美队形 - HDU 4513 （Manacher）

    分析:刚开始的想法是匹配出来每个点的最大回文串,然后用每个点的最大不下降序找一个最小值,不过不明白为什么不对....很无奈,再匹配的时候加一些判断就可以过,或许还有什么没想到的地方吧.....   代 ...