这个空间从哪里来？

蓝虫

我不明白第一列顶部的空间来自哪里。
两列均应从同一水平线开始。

忽略边距值。
那是为了使其与容器的其余部分水平对齐。

@import url('//fonts.googleapis.com/css?family=Roboto');
.column {
  font: 12px 'Roboto';
  column-count: 2;
  column-gap: 2em;
  max-width: 52%;
  min-width: 300px;
  margin: 30px 0 auto 25%;
}

<div class="column">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sem rhoncus orci dapibus posuere ut id justo. Maecenas in venenatis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean dignissim neque
    sit amet erat placerat hendrerit. Mauris faucibus id elit quis varius. Praesent egestas eu nunc sit amet fermentum. Duis ac hendrerit orci. Nulla sed metus ullamcorper, molestie dolor vitae, lobortis tellus. Aliquam sagittis tortor eu lectus rhoncus,
    et ullamcorper ante rutrum. Etiam tincidunt rhoncus ligula, scelerisque molestie quam. Etiam a nisl in nibh congue pulvinar sit amet non nibh. Vivamus vel tincidunt sapien. Nullam leo ipsum, tincidunt molestie fermentum a, cursus quis ipsum.</p>

</div>

在JSFiddle上查看

陪同Afif

这只是p应用于的第一列的标签的默认边距div。更确切地说margin-top，您可能还注意到margin-bottom第二列中已应用了：

您可以将列属性应用于p而不是div来避免此行为：

@import url('https://fonts.googleapis.com/css?family=Roboto');
.column {
  column-gap: 2em;
  max-width: 52%;
  min-width: 300px;
  margin: 30px 0 auto 25%;
}

p {
  font: 12px 'Roboto';
  column-count: 2;
}

<div class="column">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sem rhoncus orci dapibus posuere ut id justo. Maecenas in venenatis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean dignissim neque
    sit amet erat placerat hendrerit. Mauris faucibus id elit quis varius. Praesent egestas eu nunc sit amet fermentum. Duis ac hendrerit orci. Nulla sed metus ullamcorper, molestie dolor vitae, lobortis tellus. Aliquam sagittis tortor eu lectus rhoncus,
    et ullamcorper ante rutrum. Etiam tincidunt rhoncus ligula, scelerisque molestie quam. Etiam a nisl in nibh congue pulvinar sit amet non nibh. Vivamus vel tincidunt sapien. Nullam leo ipsum, tincidunt molestie fermentum a, cursus quis ipsum.</p>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。