和的margin上下和padding上下不起做用的緣由和解決

今早，工做須要作一個簡單的頁面，使用到了<span>和<a>標籤，發如今樣式裏面直接寫margin-top、margin-bottom和padding-top、padding-bottom都不起做用，頁面樣式的東西懂得很少，搜索一番，發現是由於<span>和<a>都不是塊級元素，因此這幾個屬性都無效。

解決辦法：在樣式 中加入display:block;便可解決問題

span{

 display:block;

 width:60px;

 height:20px;

 float:left;

 border:1px solid #B8D0D6;

 text-align:center;

 line-height:20px;

 margin-top:10px;

 margin-left:10px;

}

span:hover{

 background-color:#E8EDF3;

}

span a{

 display:block;

 text-align:center;

 line-height:20px;

}

順便mark一下，span的樣式中，爲保證文字水平和垂直居中，須要添加以下的屬性：
 text-align:center;
line-height:20px;
其中text-align:center;顧名思義，不須要解釋了。line-height:20px;這個屬性的值須要和span的高度保持一致。

效果以下：

使用dwz作的一個後臺相冊管理。