CSS 外边距合并

css 外边距合并解决方法
CSS外边距合并是指当两个相邻的元素都设置了外边距时，它们的外边距会合并成一个外边距的现象。

这种合并会影响到页面布局，有时可能不符合设计预期。

在以下情况下会发生外边距合并：
1. 当上下相邻的块级元素没有边框、内边距或者清除浮动，它们的上下外边距会合并成一个外边距。

合并后的外边距大小取两者中较大的那个外边距。

2. 当一个块级元素的上外边距和它的第一个子元素的上外边距相邻时，它们的上外边距会合并成一个外边距。

3. 当一个块级元素的下外边距和它的下一个兄弟元素的上外边距相邻时，它们的上下外边距会合并成一个外边距。

为了解决外边距合并的问题，可以采取以下方法：
1. 使用padding代替外边距：将外边距设置为0，然后使用padding来达到相同的效果。

2. 使用边框或内边距：给相邻的元素添加一个边框或内边距，这样可以阻止外边距的合并。

3. 使用浮动或定位：给其中一个元素添加浮动或定位属性，这样可以阻止外边距合并。

4. 使用伪元素：给其中一个元素添加一个空的伪元素，并设置其display属性为inline-block或inline，这样可以阻止外边距的合并。

5. 使用overflow属性：给包裹相邻元素的父元素添加overflow属性，可以阻止外边距合并。

总结起来，外边距合并是CSS中的一个特性，可以通过调整布局或添加额外的样式来解决。

了解外边距合并的原理，能够更好地控制页面的布局，提高用户体验。

属性作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px;上下左右内边距均为 10像素padding:5px 10px;上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px;上内边距是5px ，左右内边距是10px ，下边距是15px padding:5px 10px 15px 20px;上是5px ，右是10px ，下是15px ，左是20px 从上顺时针（⼆）css 盒⼦模型记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~⼀、⽹页布局的本质⽹页布局过程：　1、先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box　2、利⽤CSS 设置好盒⼦样式，然后摆放到相应位置　3、往盒⼦⾥装内容⽹页布局的核⼼本质：就是利⽤CSS 摆盒⼦。

⼆、盒⼦模型所谓盒⼦模型：就是把HTML 页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。

CSS 盒⼦模型本质上是⼀个盒⼦，封装周围的HTML 元素，它包括：边框、外边框、内边距和实际内容其中：content ：实际内容padding （内边距）：盒⼦边框与内容之间的距离margin （外边距）：盒⼦与盒⼦之间的距离border （边框）：字⾯意思三、内边距（padding ）padding 属性⽤于设置内边距，即边框与内容之间的距离padding 属性的复合写法可以有⼀到四个值也可以单独指定padding 值：padding-top ：10px; （其他⽅位同理）注：padding 可能会影响盒⼦的实际⼤⼩。

属性作⽤margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距如上图，⼀个100 x 100的盒⼦，在设置padding 为30px 以后，盒⼦实际⼤⼩变为160 x 160因此在使⽤时，应当注意padding 对盒⼦⼤⼩的影响，以设置盒⼦的最终⼤⼩。

CSSmargin详解以下的分享是本⼈最近⼏天学习了margin知识后，⼤有启发，感觉以前对margin的了解简直太浅薄。

所以写成以下⽂章，⼀是供⾃⼰整理思路；⼆是把知识分享出来，避免各位对margin属性的误解。

内容可能会有点多，但都是精华，希望⼤家耐⼼学习。

以下的分享会分为如下内容：1.margin 属性的简单介绍 1.1：普通流的 margin 百分⽐设置 1.2：绝对定位的 margin 百分⽐设置2.margin ⽆法适⽤的元素3.外边距折叠 (Collapsing margins) 3.1：Collapsing margins 初衷 3.2：Collapsing margins 类型 3.2.1：兄弟元素的 margin 重叠 3.2.2：⽗⼦元素的 margin 重叠 3.2.3：元素⾃⾝的 margin-bottom 和 margin-top 相邻时也会折叠4.折叠后 margin 的计算规则 4.1：参与折叠的 margin 都是正值 4.2：参与折叠的 margin 都是负值 4.3：参与折叠的 margin 中有正值，有负值5.Collapsing margins 解决⽅法1.margin 属性的简单介绍 在介绍margin之前，先剖上⼀张W3C标准盒模型的图⽚，以便读者可以查看相关位置。

margin，顾名思义，叫做外边距。

margin的基本属性有以下⼏点 a：margin 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，表明 margin 的⼤⼩范围。

b：margin 值可以是宽度值、百分⽐值或 'auto' 这3者之⼀。

注意，margin 必须带有单位，单位可以是像素、英⼨、毫⽶或 em。

c：margin 百分⽐值是相对于⽗元素的 width 计算的。

css 外边距合并解决方法外边距合并是一种常见的 CSS 样式问题,可能会导致页面布局出现问题,尤其是在使用滚动滚动视图时,外边距合并可能会导致页面内容被滚动到边缘。

以下是一些解决方法:1. 使用绝对定位:将需要合并的外边距的元素的绝对定位到另一个元素外部,然后再将另一个元素设置为 `position: relative`,使其与第一个元素具有相同的外边距。

这种方法需要小心,因为如果外边距过大,可能会导致页面滚动到边缘。

2. 使用 `margin-top` 和 `margin-bottom`:将需要合并的元素的`margin-top` 和 `margin-bottom` 合并成一个,然后再将它们与另一个元素的`margin-top` 和 `margin-bottom` 合并,以使它们具有相同的值。

这种方法可以确保外边距不会重叠。

3. 使用 `border-radius`:将需要合并的元素的 `border-radius` 合并成一个,然后将其与另一个元素的 `border-radius` 合并,以使它们具有相同的值。

这种方法可以确保元素之间的外边距不会重叠。

4. 使用 JavaScript:可以使用 JavaScript 代码来合并元素的外边距。

这种方法需要小心,因为可能会导致页面布局出现问题。

通常,这种方法只适用于一些简单的情况。

下面是一个简单的示例,展示了如何使用 JavaScript 代码来合并元素的外边距:```html<div class="合并-外边距"><div class="合并-外边距-inner"></div></div><script>const outer = document.querySelector(".合并-外边距");const inner = document.querySelector(".合并-外边距-inner");inner.classList.add("合并-外边距-inner-merged");outer.classList.add("合并-外边距");inner.classList.remove("合并-外边距-inner-merged");outer.classList.remove("合并-外边距");</script>```在这个示例中,我们首先使用 `const` 声明一个元素对象 `inner`,然后使用 `const` 声明一个元素对象 `outer`,并在 `inner` 元素上添加一个`class` 属性 `合并-外边距-inner-merged`,表示它将与 `outer` 元素合并。

网页设计模考试题+参考答案一、单选题（共30题，每题1分，共30分）1.在HTML中，用于设置页面元信息的标示符是（）。

A、<'base>B、<'title>C、<'meta>D、<'head>正确答案：C2.开发网页的工具有多种，在实际工作中，最常用的的网页制作工具是（）。

A、EditplusB、notepad++C、sublimeD、Dreamweaver正确答案：D3.下面的选项中，属于常用的图片格式并且能够做动画的是（）。

A、jpg格式B、png格式C、gif格式D、psd格式正确答案：C4.下列选项中，用于改变盒子模型外边距的是（）。

A、marginB、paddingC、typeD、border正确答案：A5.在网页中插入图像，若图像文件位于html文件的上一级文件夹，则在文件名之前加入（）。

A、../B、../../C、./D、/正确答案：A6.在行内式CSS样式中，<'style>标记可以设置元素的样式，它一般位于（）标记中<'title>标记之后。

A、<'h1>B、<'p>C、<'head>D、<'body>正确答案：C7.当通过定义列表实现图文混排时，可以定义图片解释说明文字的标记是（）。

A、<'dl><'/dl>B、<'li><'/li>C、<'dd><'/dd>D、<'dt><'/dt>正确答案：C8.下面的选项中，表示元素距离上下左右的外边距都是10px的是哪一项？（）A、{margin: 10px 0;}B、{margin: 10px;}C、{padding:10px;}D、{padding: 10px 0;}正确答案：B9.当<'p>标记内嵌套<'strong>标记时，就可以使用后代选择器对其中的<'strong>标记进行控制。

题目：内部样式表的优先级总是高于外部样式表。

（）
选项A：对
选项B：错
答案：错
题目：外部样式表是指定义在head元素中的style元素内的一组CSS样式声明。

（）选项A：对
选项B：错
答案：错
题目：凡是定义在元素开始标签之外的样式表，都成为外部样式表。

（）
选项A：对
选项B：错
答案：错
题目：父元素所有样式属性，子元素都会自动继承。

（）
选项A：对
选项B：错
答案：错
题目：默认情况下，ID选择器优先级最高，元素选择器优先级最低。

（）
选项A：对
选项B：错
答案：对
题目：为适应不同大小的显示设备，应尽量选择相对单位设置尺寸，如百分比(%)。

（）选项A：对
选项B：错
答案：对
题目：单位1px的显示大小不会随显示器分辨率改变而改变。

（）
选项A：对
选项B：错
答案：错
题目：margin:auto;可设置元素在水平和垂直两个方向都居中。

（）
选项A：对
选项B：错
答案：错
题目：外边距合并，是指当两个垂直方向外边距相遇时，将合并为一个外边距。

（）
选项A：对
选项B：错
答案：对。

相邻元素之间的margin合并问题任何元素都可以设置border 设置宽⾼可能⽆效⾏内元素设置padding，margin上下是⽆效的，左右是有效的外边距合并：指的是，当两个垂直外边距相遇时，它们将形成⼀个外边距。

合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度中的较⼤者。

外边距合并（叠加）是⼀个相当简单的概念。

但是，在实践中对⽹页进⾏布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成⼀个外边距。

合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度中的较⼤者。

当⼀个元素出现在另⼀个元素上⾯时，第⼀个元素的下外边距与第⼆个元素的上外边距会发⽣合并。

请看下图：1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="utf-8">5 <style type="text/css">6 * {7 margin:0;8 padding:0;9 border:0;10 }1112 #d1 {13 width:100px;14 height:100px;15 margin-top:20px;16 margin-bottom:20px;17 background-color:red;18 }1920 #d2 {21 width:100px;22 height:100px;23 margin-top:10px;24 background-color:blue;25 }2627 </style>28 </head>2930 <body>3132 <div id="d1">33 </div>3435 <div id="d2">36 </div>3738 <p>请注意，两个 div 之间的外边距是 20px，⽽不是 30px（20px + 10px）。

margin合并及解决办法外边距合并指的是，当两个垂直外边距相遇时，它们将形成⼀个外边距。

合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度中的较⼤者⽔平⽅向不会发⽣合并只有普通⽂档流中块框的垂直外边距才会发⽣外边距合并。

⾏内框、浮动框或绝对定位之间的外边距不会合并。

情况1当⼀个元素出现在另⼀个元素上⾯时，第⼀个元素的下外边距与第⼆个元素的上外边距会发⽣合并。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0px;padding: 0px;}div{border: 1px solid black;}.div1{margin-bottom: 20px;}.div2{margin-top: 10px;}</style></head><body><div class="div1">divtest1</div><div class="div2">divtest2</div></body></html>情况2当⼀个元素包含在另⼀个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发⽣合并。

深⼊理解css中的margin属性之前我⼀直认为margin属性是⼀个⾮常简单的属性，但是最近做项⽬时遇到了⼀些问题，才发现margin属性还是有⼀些“坑”的，下⾯我会介绍margin的基本知识以及那些“坑”。

这篇博⽂主要分为以下⼏个部分：第⼀部分：margin--基础知识 要介绍margin的基础知识，我们不可回避地要谈到css盒⼦模型（Box Model），⼀般⽽⾔，css盒⼦模型是⽤来设计和布局的。

它本质上是⼀个盒⼦，包括：外边距（margin）、边框（border）、内边距（padding）以及最中间的内容（content）。

下图即为盒⼦模型（这⾥只谈W3C规范的标准盒模型，⽽不谈IE5和IE6在怪异模式中使⽤的⾮标准的盒⼦模型）： 我们要介绍的margin在最外层，因为margin（外边距）⼀定是透明的，所以它可以⽤来使得不同的盒⼦之间留有⼀定的间隙从⽽达到布局美观等效果。

从上⾯的盒⼦模型中我们可以看到，margin在四周均存在，我们可以使⽤margin-top、margin-right、margin-bottom、margin-left分别设置这四个⽅向的margin值。

（注：由于这部分知识较为基础，所以我不再在这部分不做更多介绍）第⼆部分：margin--在同级元素（⾮⽗⼦关系）之间应⽤ 这⼀部分主要介绍⽔平⽅向和竖直⽅向的外边距的合并问题。

　（1）⽔平⽅向的外边距合并 两个⽔平⽅向的盒⼦相遇，那么最终两者之间的距离为左边盒⼦的右外边距和右边盒⼦的做外边距之和。

例1： 代码如下：display: inline-block;margin-right: 50px;font-size: 20px;}.right{width: 100px;height: 100px;background: yellow;display: inline-block;margin-left: 50px;font-size: 20px;}</style></head><body><div class="left">宽为100px,右边距为50px</div><div class="right">宽为100px,左边距为50px</div></body></html>效果如下：这时两者之间的距离刚好为100px。

margin在css中的用法margin在css中的用法1. margin的基本语法•margin属性是用来设置元素的外边距。

•基本语法：margin: top right bottom left;2. 使用固定数值•固定数值的示例：margin: 10px 20px 15px 5px;•上边距为10像素，右边距为20像素，下边距为15像素，左边距为5像素。

3. 使用百分比•百分比的示例：margin: 5% 10% 15% 20%;•上边距为父元素宽度的5%，右边距为父元素宽度的10%，下边距为父元素宽度的15%，左边距为父元素宽度的20%。

4. 使用auto•auto可以自动计算外边距。

•示例：margin: auto;•元素的上、下外边距为0，左、右外边距根据需要自动计算，使元素在父元素中居中。

5. 使用正负值•正值会使元素的边界距离外部元素更远，而负值会使元素的边界距离外部元素更近。

•示例：margin: -10px 20px;•上边距为负10像素，右边距为20像素，下边距为负10像素，左边距为20像素。

6. 单独设置边距•可以单独设置上、右、下、左边距。

•示例：margin-top: 20px;•设置元素的上边距为20像素。

7. 合并边距•当两个相邻元素的外边距相遇时，会合并为单个边距，取其中较大的值。

•示例：.element1 { margin-bottom: 10px; } .element2 { margin-top: 20px; }•元素2的上边距为20像素，元素1的下边距为10像素，但它们相遇时的边距为20像素。

8. margin与块级元素•块级元素会在垂直方向上复合父元素的上下外边距。

•示例：.parent { margin-bottom: 20px; } .child { margin-top: 10px; margin-bottom: 15px; }•子元素的上边距为10像素，下边距为15像素，但最终与父元素的边距是20像素。