My前端：inline、block、inline-block的区别

时间 2019-12-11

标签前端 inline block 区别繁體版

原文原文链接

inline、block、inline-block的区别

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

 
        < 
        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 
        > 
       

咱们发现内联对象inline给它设置height和width是没有用的，导致它变宽变大的缘由是内部元素的宽高+padding。观察inline对象的先后元素咱们会发现Inline不单独占一行，其它元素会紧跟其后。html

块对象block是能够设置宽高的，可是它的实际宽高是自己宽高+padding。观察block的先后元素咱们会发现block要单独占一行。测试

当看到这里的时候咱们就会想，若是咱们即须要div有宽高，又不但愿它独占一行怎么办？网站

这个时候咱们就须要使用inline-block了，再观察一下上图，咱们会发现inline-block即具备block的宽高特性又具备inline的同行元素特性。ui

最后提醒一下，IE6/7下padding对inline的宽高是对其没影响的。看下图：spa