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

Issue

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

Author

回答者: shfshanyue (opens new window)

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

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

代码为，可见于行内元素的 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;
}

Author

回答者: fariellany (opens new window)

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

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

← 7. 使用 CSS 如何画一个三角形 9. html 的默认 display 属性是多少 →