盒子属性对于行内非替换元素的特殊性
对行内非替换元素（如span、i等）设置某些盒子属性如padding、margin、border，可能会触发意料之外的效果，下面进行详细解析。
假设有页面如下图，页面中各个元素类型如图中各元素文本所示。
上下padding的失效
为行内级非替换元素span1设置左右padding时，元素被正常撑大，但是设置上下padding时候元素不占据该部分空间，却仍然有相应的显示效果。代码如下。
.span1{
padding: 10px;
}
效果如下图。
上下margin的失效
为行内级非替换元素span1设置左右margin时，页面可以有正常间距显示，但是设置上下margin时会失效。代码如下。
.span1{
margin: 10px;
}
效果如下图。
上下border的失效
为行内级非替换元素span1设置左右border时，元素被正常撑大，但是设置上下border时候元素不占据该部分空间，但有相应的显示效果。代码如下。
.span1{
border: 10px solid darkred;
}
效果如下图。
综上所述，行内非替换元素常常仅用于设置段落内某行的部分内容，而不应当承担太多职责，在使用时不应为其设置过多的盒子属性。
