030_CSS外边距合并

1. 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。

2. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

3. 外边距合并

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

3.2. 简单地说, 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

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

3.3.1. 代码

<!DOCTYPE html>
<html><head><title>CSS上下元素外边距合并</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;}div {width: 100px;height: 100px;}#d1 {background-color: red;margin-bottom: 20px;}#d2 {background-color: blue;margin-top: 50px;}</style></head><body><div id="d1"></div> <div id="d2"></div><p>当一个元素出现在另一个元素上面时, 第一个元素的下外边距与第二个元素的上外边距会发生合并。 <br />请注意, 两个div之间的外边距是50px, 而不是70px(20px + 50px)。</p></body>
</html>

3.3.2. 效果图

3.4. 当一个元素包含在另一个元素中时, 如果外层元素和内层元素之间没有别的元素或文本, 它们的上和下外边距也会发生合并。请看下图:

3.4.1. 代码

<!DOCTYPE html>
<html><head><title>CSS包含元素外边距合并</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;}#d1 {width: 200px;height: 200px;background-color: red;margin-top: 20px;}#d2 {width: 100px;height: 100px;background-color: blue;margin-top: 50px;}#d3 {width: 200px;height: 200px;background-color: red;}#d4 {width: 100px;height: 100px;background-color: blue;margin-top: 50px;}</style></head><body><div id="d1"><div id="d2"></div></div><div id="d3"><div id="d4"></div></div><p>当一个元素包含在另一个元素中时, 如果外层元素和内层元素之间没有别的元素或文本, 它们的上和下外边距也会发生合并。</p></body>
</html>

3.4.2. 效果图

3.5. 假设有一个空元素, 它有外边距, 但是没有边框或内边距或填充。在这种情况下, 上外边距与下外边距就碰到了一起, 它们会发生合并。请看下图:

3.5.1. 代码

<!DOCTYPE html>
<html><head><title>CSS空元素自身外边距合并</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;background-color: red;}#d1 {margin-top: 20px;margin-bottom: 50px;}#d2 {width: 100px;height: 100px;background-color: blue;}</style></head><body><div id="d1"></div><div id="d2"></div><p>假设有一个空元素, 它有外边距, 但是没有边框或内边距或填充。在这种情况下, 上外边距与下外边距就碰到了一起, 它们会发生合并。</p></body>
</html>

3.5.2. 效果图

3.6. 如果这个外边距遇到另一个元素的外边距, 它还会发生合并。请看下图:

3.6.1. 代码

<!DOCTYPE html>
<html><head><title>CSS多级元素外边距合并</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;background-color: red;}#d1   {margin-top: 20px;margin-bottom: 50px;}#d2  {width: 100px;height: 100px;margin-top: 70px;background-color: blue;}</style></head><body><div id="d1"></div><div id="d2"></div></body>
</html>

3.6.2. 效果图

4. 外边距合并初看上去可能有点奇怪, 但是实际上, 它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并, 后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并, 段落之间的上外边距和下外边距就合并在一起, 这样各处的距离就一致了。

4.1. 代码

<!DOCTYPE html>
<html><head><title>CSS合并段落外边距</title><meta charset="utf-8" /><style type="text/css">body, hr {margin: 0;padding: 0;}p {width: 600px;background-color: orange;}</style></head><body><p>外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。</p> <p>第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。</p><hr/><p>如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。</p></body>
</html>

4.2. 效果图

5. 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

030_CSS外边距合并相关推荐

5、CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 1.外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中 ...
【温故知新】CSS学习笔记（外边距合并）
CSS外边距合并外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 一.相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin ...
课时109.外边距合并现象（掌握）
我们先写一个案例,通过案例来了解它们之间的水平距离就是两个间距的和我们看完水平再来看垂直方向在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距比较大就听谁的本文转 ...
CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并
HTML引入CSS的方法 1,嵌入式通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
（盒子模型常见问题）外边距合并问题，嵌套盒子边距塌陷问题解决
1.兄弟盒子边距合并. <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
外边距合并(HTML、CSS)
外边距合并(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
最全的css中解决外边距合并问题
外边距合并首先,我们先来看一下什么是外边距合并. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们 ...
CSS外边距合并和CSS清除浮动
外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页 ...

030_CSS外边距合并

030_CSS外边距合并相关推荐

最新文章

热门文章