Question

这是我的代码：

.content {
  padding-top: 10px;
}
ul {
  padding-top:0;
  margin-top:0;
}

<h1>Title</h1>
<div class='content'>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

对于padding top内部'内容'，我的需求非常有用，但有时候ul之前可能会有文字：

<h1>Title</h1>
<div class='content'>
  Some Text
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul
</div>

我希望文本和未排序列表之间有空格，但如果我向margin添加padding top或<ul>，则间距会变得过大文本不存在。我需要提出适用于这两种方案的CSS。不幸的是，我无法控制标记，因此我无法添加换行符或将该介绍文本包装到另一个div中。我也尝试过使用：

.content > ul {margin-top:10px}
.content > ul:first-child {margin-top: 0}

以及

.content > * + ul { margin-top:10px}

这些都不奏效。无论文本是否存在，<ul>始终被视为第一个child。

Answer 1

利用margin collapse的一些技巧，您可以在margin-bottom上添加h1，在margin-top上添加ul。

由于包裹div的{{1}}没有填充，边框或任何内容（当没有文字时），ul将会崩溃父母并将其应用于margin-top，然后div上的边距和下边距将作为相邻的兄弟姐妹崩溃。

然后，当您向h1添加内联内容时，其中包含div内的ul

内的边距

＆＃13;

div

＆＃13;

h1 {
  margin-bottom: 10px;
}
ul {
  padding-top:0;
  margin-top:10px;
}

＆＃13;

Answer 2

.content > ul:first-child和margin:10px相同，因此存在冲突。您首先添加margin:0px，然后添加margin:0px。

margin:10px是赢家因为h1 { margin-bottom: 10px; } .content ul { margin-top: 10px; }之后。

<h1>Title</h1>
<div class='content'>
  Some Text
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

{{1}}