行内非替换元素的注意点(padding、margin和border)

行内非替换元素的注意点(padding、margin和border)
 
1.以下属性对行内非替换元素不生效
width和height;
margin-top和margin-bottom(左右margin是可以正常生效的);
 
2.以下属性对行内非替换元素的效果比较特殊
padding-top和padding-bottom(左右padding是可以正常生效的);
 
示例代码:
 
span {
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: red;
}
<div>上div</div>
<span>span1</span>
<span>span2</span>
<div>下div</div>
运行结果:span设置的上下padding是不占据空间的,所以会延伸到上下元素上;
 
 
 
上下border(左右border是可以正常生效的);
 
示例代码:
 
span {
  border-top: 8px solid green;
  border-bottom: 8px solid green;
  background-color: red;
}
<div>上div</div>
<span>span1</span>
<span>span2</span>
<div>下div</div>
运行结果:span设置的上下border是不占据空间的,所以会延伸到上下元素上;

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64656.shtml

张贴在3