CSS多列布局边距问题

Question

我有一个基于 CSS 的 2 列布局...

.mainContentSection {
  font-size: 1.1em;
  margin: 20px 10px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}

.mainContentSection p {
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid gray;
}

有时，第二列的顶部会抓住前一段底部的边距。这会推下下一段的顶部，如附图所示。我尝试过打破内部、改变边距、内联块。所有这些都取得了一些成功，但并非最佳。我可以访问第二列来删除该边距吗？

Answer 1

只需不要在.mainContentSection元素上使用上边距，因此该margin行将显示为： margin: 0 10px 20px 10px;

.mainContentSection {
  font-size: 1.1em;
  margin: 0 10px 20px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}