inline、block、inline-block的区别_d-inline和d-inline-block区别-优快云博客

本文通过实例对比了inline、block及inline-block三种CSS显示属性的区别。详细介绍了它们对于元素宽高设置的影响，以及如何影响页面布局。inline-block允许元素既具有块级元素的宽高特性，又保持与其他元素在同一行。

我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道 inline是声明div是内联对象，block是声明块对象，那么inline-block是什么意思，即内联又成块？接下来做个测试，让我们了解一下三者的区别和作用吧：

 
        <
        html
        
 xmlns
        =
        "http://www.w3.org/1999/xhtml"
        >
       
        <
        head
        >
       
        <
        meta
        
 http-equiv
        =
        "Content-Type"
        
 content
        =
        "text/html;
 charset=utf-8" 
         
 />
       
        <
        title
        >inline、block、inline-block的区别</
        title
        >
       
        <
        style
        >
       
        .a{display:inline;
 width:100px; height:100px; padding:5px; background-color:#F00;}
       
        .b{display:block;
 width:100px; height:100px; padding:5px;background-color:#0f0;}
       
        .c{display:inline-block;
 width:100px;height:100px; padding:5px;background-color:#00f;}
       
        </
        style
        >
       
        </
        head
        >
       
        <
        body
        >
       
        <
        span
        
 class
        =
        "a"
        >
       
        inline
       
        </
        span
        >inline
       
        <
        span
        
 class
        =
        "b"
        >
       
        block
       
        </
        span
        >block
       
        <
        span
        
 class
        =
        "c"
        >
       
        inline-block
       
        </
        span
        >inline-block
       
        </
        body
        >
       
        </
        html
        >