2017.9.13 行内元素的盒模型解析

最新推荐文章于 2024-02-04 16:20:58 发布

转载最新推荐文章于 2024-02-04 16:20:58 发布 · 275 阅读

本文探讨了HTML中行内元素的padding和margin属性的有效性。解释了哪些方向的padding和margin设置对于行内元素如span是有效的，哪些则是无效的。并通过实例展示了具体的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

行内元素的padding和margin是否无效

1——首先行内元素是否具有盒子模型？
答：行内元素同样具有盒子模型。

2——行内元素的padding、margin是否无效？
答：

行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
行内元素的padding-left、padding-right、margin-left、margin-bottom属性设置是有效的

行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。

de  ><head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      span{
          background-color: red;
          margin:10px;
          padding: 30px;
      }
  </style>
</head>
<body>
  <span>我是span</span>
  <div>我是div</div>
</body>de>

观察上面这张图，

span标签左右外边距10px，说明行内元素的margin-left设置是有效的
span标签左右内边距30px，说明行内元素的padding-left设置是有效的
span标签上边距为0px，下边距为30px，说明行内元素的padding-top设置是无效的。
div标签中的文字de >我是divde>和span标签中的文字de >我是spande>两行相连接，并没有任何间距，说明行内元素的padding-top、padding-bottom并没有被撑开，只是从显示效果上看貌似被撑开了。