inline-block元素是否仅识别左上外边距？右下外边距不生效？

那个“inline-block元素仅识别顶部和左侧外边距，底部和右侧不生效”的观点完全错误。

inline-block元素同时具备inline和block元素的特性：

• 它保留了block元素可以设置宽高、四个方向内边距和外边距的能力
• 同时拥有inline元素可以和其他inline/inline-block元素在同一行排列的特性

四个方向的外边距都是有效的，只是垂直方向的外边距不会像block元素那样和相邻block元素的margin发生折叠，但这并不代表底部/右侧margin不生效。

拿你提供的代码为例，实际运行时，设置了display: inline-block的body元素，四个方向的margin都会生效：

• 顶部100px会让body和浏览器视口顶部拉开距离
• 左侧90px会让body和视口左侧拉开距离
• 右侧10px会让body和视口右侧拉开距离
• 底部10px会让body和视口底部拉开距离

以下是整理后的完整代码示例：

HTML代码 #

<p class="pick">hello1</p>
<p class="pick">hello2</p>
<p class="pick">hello3</p>
<div>1234</div>
<p>hello</p>

CSS代码 #

body{
  display: inline-block;
  margin: 100px 10px 10px 90px;
  /* top:    100 px margin */
  /* right:  10 px margin  */
  /* bottom: 10 px margin */
  /* left:   90 px margin  */
}

内容的提问来源于stack exchange，提问作者Michael36