<span>和<a>的margin上下和padding上下不起作用的原因和解决

标签：

使用到了<span>和<a>标签，发现在样式里面直接写margin-top、margin-bottom和padding-top、padding-bottom都不起作用，页面样式的东西懂得不多，搜索一番，发现是因为<span>和<a>都不是块级元素，所以这几个属性都无效。

解决办法：在样式 中加入display:block;即可解决问题。

span的样式中，为保证文字水平和垂直居中，需要添加如下的属性：
 text-align:center;
line-height:20px;
其中text-align:center;顾名思义，不需要解释了。line-height:20px;这个属性的值需要和span的高度保持一致。

display:inline-block是行内的块级元素，它拥有块级元素的特点，可以设置长宽，可以设置margin和padding值，但它却不是独占一行的，它的宽带并不占满父元素，而是和行内元素一样，可以和其他行内元素排在同一行里。它集块级元素和行内元素的特点于一身。

　　position:absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position:absolute、float:left或float:right中任意一个，都会让元素以display:inline-block的方式显示。就算我们显示地设置display:inline或者display:block，也仍然无效（float在IE 6 下的双倍边距bug就是利用添加display:inline来解决的）。

　　值得注意的是，position:relative却不会隐式改变display的类型。

<span>和<a>的margin上下和padding上下不起作用的原因和解决

标签：

原文地址：http://www.cnblogs.com/vincentDr/p/4448756.html