为何无序列表首个<li>元素的margin-top属性不生效？

你遇到的情况确实是外边距合并导致的。当父元素（这里是<ul>）满足以下条件时，会和第一个子元素（<li>）的上边距合并：

• 父元素没有设置border-top、padding-top
• 父元素没有清除浮动的属性
• 第一个子元素是块级元素，且未设置float、position:absolute/fixed等脱离文档流的属性

此时第一个<li>的margin-top会“转移”到父元素<ul>的外边距上，看起来像是<li>的margin-top没生效，但实际上这个外边距是作用在<ul>和它的父元素之间，而非<li>和<ul>之间。

这里提供几个简单有效的解决方案：

方案1：给<ul>添加上内边距 #

把第一个<li>的margin-top换成<ul>的padding-top，既能保持间距，又不会触发外边距合并：

ul {
  background-color : #295580;
  width            : 190px;
  border-radius    : 6px;
  padding-top: 20px; /* 添加上内边距 */
}

ul>li {
  background-color : #d9e8f7;
  margin-top       : 20px;
}

方案2：给<ul>添加透明边框 #

通过给<ul>设置一个不影响视觉的透明上边框，阻止外边距合并：

ul {
  background-color : #295580;
  width            : 190px;
  border-radius    : 6px;
  border-top: 1px solid transparent; /* 透明边框 */
}

ul>li {
  background-color : #d9e8f7;
  margin-top       : 20px;
}

方案3：触发<ul>的BFC #

给<ul>设置overflow:auto或overflow:hidden，触发块级格式化上下文（BFC），BFC会阻止外边距合并：

ul {
  background-color : #295580;
  width            : 190px;
  border-radius    : 6px;
  overflow: auto; /* 触发BFC */
}

ul>li {
  background-color : #d9e8f7;
  margin-top       : 20px;
}

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