Rumah >hujung hadapan web >html tutorial >CSS基础学习十五:盒子模型补充之外边距合并_html/css_WEB-ITnose

CSS基础学习十五:盒子模型补充之外边距合并_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:33:081256semak imbas

       今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属

性设置都是介绍了盒子模型中的内容概括。开始今天的主题:外边距合并。

       外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合

并的外边距的高度中的较大者。

       (1)外边距合并

       外边距合并叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,外

边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外

边距的高度中的较大者。

       当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:


       如果看上面的图还不直观,我们来举一个实例:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>CSS</title>
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn