说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. 一键源码安装Ansible

    #!/bin/bash # @Name:install_ansible.sh # @Author:Eivllom # @Create -- # @Modify -- app_soft="/a ...

  2. HDOJ(HDU) 2143 box(简单的多次判断-用的卫条件)

    Problem Description One day, winnie received a box and a letter. In the letter, there are three inte ...

  3. 数学概念——A 几何概型

    You are going from Dhaka to Chittagong by train and you came to know one of your old friends is goin ...

  4. 移动UI自动化-Page Objects Pattern

    移动UI自动化,看起来美好,践行起来却难.做个目光短见的务实主义者.Page Objects Pattern是Selenium官方推崇的方式,最近研究写测试用例最佳实践之Page Objects,同时 ...

  5. POJ 3187 穷举

    题意:已知有N个数分别为1-N,如下图为4个数.相邻两两相加直至只剩下一个数,下图的结果就是16. 3 1 2 4     4 3 6   7 9 16 现在反过来看,告诉你数的个数N和最终结果,问这 ...

  6. idea mac 快键键

    alt + 花 + 左右          上一步下一步 shift + 花 + F             全文检索 花 + O                       类查找 alt + 花 ...

  7. boost库在工作（32）网络服务端之二

    在这个例子里,服务器对象主要使用boost::asio::io_service对象,这个对象主要用来构造异步接收数据使用,接着定义boost::asio::ip::tcp::acceptor对象,这个 ...

  8. Android 省市县 三级联动（android-wheel的使用）[转]

    转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...

  9. ubuntu 修改运行级别

    只转载了成功的, 具体参见原文  http://www.2cto.com/os/201308/237632.html 第一种方法:(内核级别的)   Sudo vi /etc/default/grub ...

  10. 【开源java游戏框架libgdx专题】-14-系统控件-Skin类

    Skin类主要用于存储用户界面的资源,该资源主要用于窗口部件.这些资源也包括纹理图片.位图画笔.颜色等内容.方便创建游戏组件,同时使用Skin也可以批量的粗略处理一些窗口部件. test.json { ...