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

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

Author 回答者: shfshanyue (opens in a new tab)

可参考文章 http://maxdesign.com.au/articles/inline/ (opens in a new tab)

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

代码为，可见于 行内元素的padding与margin - codepen (opens in a new tab)

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

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

.item {
  padding: 1rem;
  border: 1px solid red;
}
 
.container {
  margin: 3rem;
  background-color: #ccc;
  height: 10rem;
}

Author 回答者: fariellany (opens in a new tab)

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

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