极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# display: inline 的元素设置 margin 和 padding 会生效吗

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 281 (opens new window)

可参考文章 http://maxdesign.com.au/articles/inline/

inline 元素的 margin 与 padding 左右生效,上下生效,准确说在上下方向不会使其它元素受到挤压,仿佛不生效,如下图设置 border 会发现它其实生效了

image

代码为,可见于 行内元素的 padding 与 margin - codepen (opens new window)

<div class="container">
  我是<span class="item">行内元素</span
  >白日依山尽,黄河入海流。欲穷千里目,更上一层楼。白日依山尽,黄河入海流。欲穷千里目,更上一层楼。白日依山尽,黄河入海流。欲穷千里目,更上一层楼。白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
</div>

.item 行内元素设置样式,观察效果:

.item {
  padding: 1rem;
  border: 1px solid red;
}

.container {
  margin: 3rem;
  background-color: #ccc;
  height: 10rem;
}

inline 元素的 margin 与 padding 左右生效,上下不生效

不是 inline 下 margin 上下失效 ,padding 下 都生效吗 只不过不会撑大父元素而已

Last Updated: 11/27/2021, 10:11:48 AM