CSS多列布局第一列顶部空白问题排查请求

这个问题其实是因为<p>元素默认的margin-top在搞鬼！浏览器渲染多列布局时，会把段落的顶部外边距算进第一列的布局空间里，导致第一列看起来比第二列高一块，没法对齐。

解决方案： #

有几种简单的办法可以修复这个问题：

1. 移除<p>的默认顶部外边距
   给.column里的<p>设置margin-top: 0;，这样就能消除顶部的空白，让两列从同一水平线开始。修改后的CSS代码如下：

   @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%;
   }
   .column p {
     margin-top: 0; /* 关键：移除p标签默认的顶部外边距 */
   }
   

2. 给容器添加padding-top并抵消<p>的margin-top
   如果你不想完全去掉<p>的margin，也可以给.column加padding-top，同时用负margin抵消：

   .column {
     /* 其他属性不变 */
     padding-top: 1em;
   }
   .column p {
     margin-top: -1em;
   }
   

   这种方式能保留段落之间的自然间距，同时让第一列顶部和第二列对齐。

3. 改用div代替<p>（不推荐）
   虽然可以把<p>换成没有默认margin的<div>，但这样不符合HTML语义化规范，会影响页面的可访问性，所以不建议这么做。

修改后，两列的内容就会从同一水平线起始，完美对齐啦。你可以直接调整代码里的属性值，测试不同的显示效果。

内容的提问来源于stack exchange，提问作者Bluebug