区分display:block;display:inline;display:inline-block的区别

每一个元素都有默认的display属性值，对于一些开始学CSS的朋友们，很容易混淆display:block;inline:inline-block这三种用法，下面将具体细说每一种的具体用法和实例相结合。

一、display:block（块级元素）

1.一个block元素总是会占据一行，当有多个block元素就要新起多行对应。
HTML：

11
22

CSS:

#div1{
border:1px solid red;
}
#div2{
border:1px solid red;
}

效果图：

1.png

2、block元素可以设置width，默认情况下，block元素的宽度自动填满其父类元素宽度；即使设置了宽度，block仍然是独占一行。

#div1{
border:1px solid red;
width:100px;
}
#div2{
border:1px solid red;
width:100px;
}

效果图：

2.png

3、block元素可以设置height，默认情况下，block元素的高度会自动拓展包含子元素的内容。

#div1{
border:1px solid red;
width:100px;
height:100px;
}
#div2{
border:1px solid red;
width:100px;
height:100px;
}

效果图：

3.png

4、block元素可以设置padding和margin属性

#div1{
border:1px solid red;
width:50px;
height:50px;
padding:20px;
margin:20px
}
#div2{
border:1px solid red;
width:50px;
height:50px;
}

效果图：只对div1增加了padding和margin属性，参考div2进行对比。

4.png

5、block元素不能实现vertical-align这个属性。

总结：

,

,

,

,

和
• 是块元素常见的例子，我们可以设置宽度和高度，同时可以控制元素的padding和margin属性。

  二、display:inline（行内元素）

  1、inline元素不会独占一行，多个相邻的行内元素会排列在一行内，直到排不下再新换一行。
  HTML：

  
  
  
  
  
  
  
  11
  22
  
  
  

  CSS：

  #span1{
  border:1px solid red;
  }
  #span2{
  border:1px solid red;
  }
  

  效果图：

  
  
  5.png
  
  

  2、inline元素设置width和height属性无效，宽度由元素内容决定。非替换行内元素(p、label等)的行框高由line-height决定，替换行内元素(img、input、textarea等)的行框高由height、margin、padding、border决定。

  #span1{
  border:1px solid red;
  width:100px;
  height:100px;
  }
  #span2{
  border:1px solid red;
  }
  

  效果图：只新增span1中宽度和高度，span2作为对比参考

  
  
  5.png
  
  

  3、margin和padding 在竖直方向上无效，在水平方向上有效。

  #span1{
  border:1px solid red;
  padding:20px;
  margin:20px;  
  }
  #span2{
  border:1px solid red;
  }
  

  效果图：只新增span1中padding和margin，span2作为对比参考

  
  
  6.png
  
  

  4、inline元素受vertical-align属性和white-space属性控制

  总结：

  , , , , , 和是inline元素常见的例子，设置宽度和高度对inline元素没有影响，设置padding和margin在竖直方向上无效，在水平方向上有效。

  三、display:inline-block

  既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。但是不是所有浏览器都支持这个属性，例如IE6和7就不支持这个属性，要实现这个属性必须利用其它办法。
  HTML ：

  
  
  
  
  
  
  
  11
  22
  
  
  

  CSS：

  #div1{
  border:1px solid red;
  width:50px;
  height:50px;
  padding:20px;
  margin:20px;
  display:inline-block;
  }
  #span1{
  border:1px solid red;
  width:50px;
  height:50px;
  padding:20px;
  margin:20px;
  display:inline-block;
  }
  

  效果图：div1实现了不分行，span1实现了设置宽度和高度

  
  
  7.png