前言
之前写过的css3有哪些新特性里面提到了多列布局，当时举例用的div包裹着三个p标签，结果出现的样式有点迷惑，被粉丝提问过，之前去过愉快的国庆假了，忽然想到这个问题忘了回，那就总结一篇文章吧。
解析
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .column-container { column-count: 3; column-gap: 20px; background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; } </style> </head> <body> <div class="column-container"> <p>第一列的内容...</p> <p>第二列的内容...</p> <p>第三列的内容...</p> <!-- 更多文本内容 --> </div> </body> </html>
效果如下：
可以明显看出，第一列有个上边距，但是第二列第三列却没有，代码也没有写，为什么回出现这种效果呢？原因：大多数浏览器会给<p>标签添加默认的边距（外边距）和填充（内边距）。这个默认的样式是为了在文本段落之间创建一些空白空间，以提高文本的可读性。
在这个例子中，第一个 p 标签出现上边距的原因是 column-count 属性导致了块级元素的分割。
column-count 属性可以将一个块级容器划分为多个列，这里将 .column-container 设置为3列。
在多列布局中，不同列之间是通过块级元素的分割实现的。第一个 p 标签恰好被分到了一个新的列中，所以上面出现了分割线导致看似有了上边距。
而第二和第三个 p 标签仍在同一列内，所以不会出现分割，看起来就没有上边距。
我们看下面的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .column-container { column-count: 3; column-gap: 20px; background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; } .column-container2{ column-count: 3; column-gap: 20px; background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; } .column-container2 p{ margin:0; } </style> </head> <body>; <h2>这里用div</h2> <div class="column-container"> <div>第一列的内容...</div> <div>第二列的内容...</div> <div>第三列的内容...</div> <!-- 更多文本内容 --> </div> <h2>这里用p标签，设置了margin：0</h2> <div class="column-container2"> <p>p第一列的内容...</p> <p>p第二列的内容...</p> <p>p第三列的内容...</p> <!-- 更多文本内容 --> </div> </body> </html>
效果如下：
解析：
- 第一个将p标签替换成div，正常显示。原因是 div 和 p 标签的默认样式不同导致的。p 标签是一个块级元素,默认情况下外边距值会进行合并(margin collapsing)，这导致了第一个 p 标签出现视觉上有间距的问题。而 div 作为一个通用块级容器,默认情况下的外边距是 0，不会造成外边距合并问题。
- 第二个将p标签的margin设置为0，也能解决问题。这是因为在多列布局中，不同列之间是通过块级元素的分割实现的。当列容器分割到一个新的列时,会在新的列的顶部出现一个分割线。而默认情况下，p标签和分割线之间存在外边距合并(margin collapsing)的效果。也就是说，p标签的默认上外边距(实际上是0)和分割线的上外边距发生了合并，导致了视觉上看起来p标签有了上边距。
这说明页面中的空白间距有时并不是某个元素本身的样式导致的，而是和其他元素的关系或者渲染规则引起的。
需要根据具体情况来分析元素的空白间距的根源所在，才能很好地处理这类视觉问题。
