作为一个最小的例子，这个CodePen包含一个带有两列文本的div元素。这个div，反过来，包含一个跨越两个列的h2元素(即一个扳手，参见例如MDN)。它后面的垂直间距显然不等于两列，尽管我希望它是相等的。
解决这个问题的一种方法是(在本地)修改扳手后面的p元素的margin-top(而不是标题，也可以是图形、表格等)。然而，我想知道我是否忽略了另一种方法。
片段:
.twoColumns {
width: 70vw;
margin: 0 auto;
column-count: 2;
}
h2 {
column-span: all;
}
h2+p {
/* margin-top: 0; /* Potential solution */
}<div class="twoColumns">
<h2>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</h2>
<p>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Posuere ac ut consequat semper viverra. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Quam elementum pulvinar etiam non
quam lacus. Risus pretium quam vulputate dignissim suspendisse in. Placerat orci nulla pellentesque dignissim enim sit amet. Nunc eget lorem dolor sed viverra ipsum nunc. Congue mauris rhoncus aenean vel elit scelerisque mauris. Maecenas pharetra
convallis posuere morbi leo. Eu facilisis sed odio morbi quis commodo. Vitae et leo duis ut diam quam nulla porttitor.</p>
<p>Est lorem ipsum dolor sit amet. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Scelerisque viverra mauris in aliquam sem fringilla. Id porta nibh venenatis cras sed felis. Vulputate dignissim suspendisse in est. Mi in nulla posuere
sollicitudin aliquam ultrices sagittis orci a. Est ullamcorper eget nulla facilisi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Facilisis magna etiam
tempor orci eu lobortis elementum nibh. Aliquet sagittis id consectetur purus ut. Nisl tincidunt eget nullam non nisi. Risus nec feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam. Consequat mauris nunc congue nisi vitae
suscipit tellus mauris. Magna ac placerat vestibulum lectus mauris ultrices eros. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Nibh cras pulvinar mattis nunc sed blandit libero. Pharetra sit amet aliquam id diam maecenas.</p>
</div>在<hx>之后更改第一个<p>的margin是没有问题的。
因为我更喜欢使用border-box模型，所以我发现处理CSS默认为元素分配的margin特别不方便，特别是在计算时(在使用总宽度时必须减去边距)。
一般来说，我会选择* { box-sizing: border-box; margin: 0 }，在需要的地方使用padding。
注释的代码片段显示了上面的类.demo。
.twoColumns {
width: 70vw;
margin: 0 auto;
column-count: 2;
}
h2 {
column-span: all;
}
h2 + p {
/* margin-top: 0; /* Potential solution */
}
/***********************/
/* SO74703923 Solution */
/***********************/
.demo, .demo * { box-sizing: border-box }
.demo>* {
margin: 0; /* remove all CSS default margins */
}
.demo>h2 {
padding: 0.83em 0; /* default spacing for <h2> */
}
.demo>p {
/* padding: 1em 0; /* default spacing for <p> */
padding-bottom: 1em; /* is what we need */
}
/**************************************************************/
/* Bonus: varying number of columns, viewport width depending */
/**************************************************************/
.demo {
column-count: auto; /* reset .twoColumns setting */
/*
Responsive behaviour
Instead of defining fixed two columns we can determine the required
number of pixels per column on the narrowest and the widest viewport breakpoint.
As an example I choose (regardless of above width: 70vw)
- 300px on a 320px viewport (1 column) and
- 240px on a 960px viewport (4 columns)
- [OPTIONAL] clamp the result to stay within given sizes c.q. number of columns
- convert result to 'REM' unit
- CSS 'column' mechanism takes care of horizontal distribution
*/
/* using y=mx+b for points p1(320,300) and p2(960,240) */
column-width: clamp(15rem, -9.375vw + 20.625rem, 18.75rem);
}<div class="twoColumns">
<h2>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</h2>
<p>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Posuere ac ut consequat semper viverra. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Quam elementum pulvinar etiam non quam lacus. Risus pretium quam vulputate dignissim suspendisse in. Placerat orci nulla pellentesque dignissim enim sit amet. Nunc eget lorem dolor sed viverra ipsum nunc. Congue mauris rhoncus aenean vel elit scelerisque mauris. Maecenas pharetra convallis posuere morbi leo. Eu facilisis sed odio morbi quis commodo. Vitae et leo duis ut diam quam nulla porttitor.</p>
<p>Est lorem ipsum dolor sit amet. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Scelerisque viverra mauris in aliquam sem fringilla. Id porta nibh venenatis cras sed felis. Vulputate dignissim suspendisse in est. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Est ullamcorper eget nulla facilisi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Aliquet sagittis id consectetur purus ut. Nisl tincidunt eget nullam non nisi. Risus nec feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Magna ac placerat vestibulum lectus mauris ultrices eros. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Nibh cras pulvinar mattis nunc sed blandit libero. Pharetra sit amet aliquam id diam maecenas.</p>
</div>
<div class="twoColumns demo">
<h2>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</h2>
<p>Sapien faucibus et molestie ac feugiat. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Posuere ac ut consequat semper viverra. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Quam elementum pulvinar etiam non quam lacus. Risus pretium quam vulputate dignissim suspendisse in. Placerat orci nulla pellentesque dignissim enim sit amet. Nunc eget lorem dolor sed viverra ipsum nunc. Congue mauris rhoncus aenean vel elit scelerisque mauris. Maecenas pharetra convallis posuere morbi leo. Eu facilisis sed odio morbi quis commodo. Vitae et leo duis ut diam quam nulla porttitor.</p>
<p>Est lorem ipsum dolor sit amet. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Scelerisque viverra mauris in aliquam sem fringilla. Id porta nibh venenatis cras sed felis. Vulputate dignissim suspendisse in est. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Est ullamcorper eget nulla facilisi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Aliquet sagittis id consectetur purus ut. Nisl tincidunt eget nullam non nisi. Risus nec feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Magna ac placerat vestibulum lectus mauris ultrices eros. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Nibh cras pulvinar mattis nunc sed blandit libero. Pharetra sit amet aliquam id diam maecenas.</p>
</div>