gpt4 book ai didi

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

转载 作者:知者 更新时间:2024-03-13 06:50:04 27 4
gpt4 key购买 nike

行内非替换元素的注意点(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是不占据空间的,所以会延伸到上下元素上;

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com