边距属性相关
- margin
- 外边距合并
- 当两个外边距相遇时,他们将形成一个外边距,称之为外边距合并。外边距的值,以大值为准
- A Problem
- 描述
- 内外嵌套的div元素,如果设置内层div的margin-top,默认会作用于外层div的margin-top上,而内层没有效果
- 解决方案
- 外层元素添加边框
- 外层元素添加padding-top
- 外层元素设置display:table (推荐)
- 描述
- 外边距合并
多列属性相关
- column-count 元素被分隔的列数
- column-gap 列与列之间的间隔
- column-rule 列规则, 列分隔符的宽度、样式、颜色
- 注意: 存在浏览器兼容性问题, 尽量添加前缀
- 示例代码
div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;
}