这个空间来自哪里？

Question

我无法理解第一列顶部空间的来源 两列都应从相同的水平线开始。

忽略保证金值 那是为了将它与容器的其余部分水平对齐。

＆＃13;

＆＃13;

@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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

View on JSFiddle

Answer 1

这只是应用于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>

Answer 2

2列只是一个分割成两列的段落元素。第一列上方的空间只是第一列的上边距。只需给段落col1,col2 1000,2000 3000,4000 ;