CSS外边距自动是指在不设置外边距的情况下,元素的外边距会自动合并。
示例代码: <div> <p>第一个段落</p> <p>第二个段落</p> </div> CSS样式: div{ background-color: #f2f2f2; } p{ background-color: #ccc; margin: 10px; }
以上代码中,两个段落的外边距是相等的,但是实际上元素间的间距却大于20px。这是因为相邻元素的垂直外边距会自动合并,即取它们之间的最大值。
如果我们在第二个段落中设置上外边距为0,会发现这两个元素的外边距仍然是20px。这是因为当元素的上下外边距发生合并时,只取其中的最大值,而不是求和。
示例代码: <div> <p>第一个段落</p> <p style="margin-top: 0">第二个段落</p> </div> CSS样式: div{ background-color: #f2f2f2; } p{ background-color: #ccc; margin: 10px; }
在实际应用中,我们可以利用CSS外边距自动来合并相邻元素的外边距,减少不必要的代码。