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

2019独角兽企业重金招聘Python工程师标准>>>

今早，工作需要做一个简单的页面，使用到了<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做的一个后台相册管理。

 

转载于:https://my.oschina.net/u/1438721/blog/209507