Home >Web Front-end >HTML Tutorial >CSS基础学习十五：盒子模型补充之外边距合并_html/css_WEB-ITnose
CSS基础学习十五：盒子模型补充之外边距合并_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:081278browse
今天继续接着CSS盒子模型补充，CSS基础学习十三：盒子模型和CSS基础学习十四：盒子模型补充之display属
性设置都是介绍了盒子模型中的内容概括。开始今天的主题：外边距合并。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合
并的外边距的高度中的较大者。
(1)外边距合并
外边距合并叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外
边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外
边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
如果看上面的图还不直观，我们来举一个实例：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>CSS</title>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS background 属性 总结_html/css_WEB-ITnoseNext article：Cool！15个超炫的 CSS3 文本特效【上篇】_html/css_WEB-ITnose