1.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width:400px;
height:300px;
background:grey ;
}
#box2{
width:200px;
height:100px;
background:yellow;
margin-top:30px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
如代码及图，父子级包含的时候，子级的margin-top会传递给父级；（内边距替代外边距）
要想让黄色框离灰色框上面有30像素的距离，我们可以把#box1中添加属性：padding-top:30px;
2.如果同时给上个块设置下外边距和下个块设置上外边距，上下外边距会叠压。
3.margin-left:auto;
margin-right:auto;
同时设置这两个属性可以是div始终居中，不随浏览器窗口的大小变化。
相关推荐
08_盒子模型-外边距-margin
在网页布局中，`margin`（外边距）和`padding`（内边距）是非常重要的概念。它们主要用于控制元素与其周围元素之间的空间，是CSS中最常用也是最基本的属性之一。接下来，我们将详细探讨这两种属性的特点、用法及其在...
在CSS布局中，外边距折叠（Margin Collapsing）是一个重要的概念，它涉及到元素间的垂直间距处理。这个现象主要发生在相邻元素的垂直外边距上，尤其是兄弟元素和父子元素之间的关系。我们来深入探讨这个主题。 首先...
4. **外边距（Margin）**：边框之外的空间，用于调整元素与其他元素之间的距离。`margin`属性用于设置外边距，同样有上、右、下、左四个方向。 在CSS中，有两种盒模型：标准盒模型（W3C盒模型）和IE盒模型（怪异盒...
CSS中的外边距折叠指的是相邻的两个或多个块级元素的外边距（margin）会合并成一个外边距。这种情况在块级元素垂直排列时尤为常见，比如相邻兄弟元素之间、父元素与第一个或最后一个子元素之间以及空的块级元素之间...
在CSS布局中，经常会遇到块级元素垂直外边距（margin）发生叠加的问题，这通常称为margin叠加或外边距折叠。当两个或多个毗邻的块级元素垂直方向上的margin相遇时，它们会以较大者的margin值作为一个统一的margin值...
margin 外边距 ：盒子与盒子之间距离 学习前端html 基础内容，margin 外边距的基本属性
在网页布局设计中，CSS（层叠样式表）的margin外边距合并是一个常见的问题，尤其是在元素间的间距处理上。这种现象通常被称为“外边距塌陷”（Margin Collapsing），它涉及到相邻或嵌套元素的外边距计算方式。下面...
1. **单独设置**：可以通过`margin-top`、`margin-right`、`margin-bottom`和`margin-left`单独设置各个方向的外边距。 2. **简写形式**：使用`margin`属性可以一次性设置所有方向的外边距，如`margin: 10px 20px 30...
例如，如果父元素有0的`margin-top`，而子元素的`margin-top`是40px，那么父元素的实际外边距将会被扩展到40px，这样可以使得子元素与父元素的其他内容保持一定的间距。 然而，如果父元素有非零的上内边距或边框，...
其中，`margin`属性是CSS中最常用的一个属性之一，用于设置元素外边距，即元素与其他元素之间的空白距离。为了简化CSS代码编写过程，提高代码可读性及维护性，CSS允许对`margin`属性进行缩写。 #### Margin属性的...
在CSS（层叠样式表）中，内边距（Padding）、边框（Border）和外边距（Margin）是布局和设计网页时不可或缺的概念。它们共同决定了元素在页面上的显示方式以及元素之间的空间关系。 首先，元素框的内部是内容区...
CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次...
在CSS布局中，外边距（Margin）是一个重要的概念，它指的是元素边框之外的空白区域，用于控制元素之间的空间。外边距合并是CSS布局中一个常见的现象，特别是涉及到元素垂直排列时。当我们为相邻元素设置外边距时，...
在CSS布局中，外边距（margin）的重叠是一个常见的现象，特别是在处理多个垂直相邻的块级元素时。按照W3C规范，当两个或多个块级元素的垂直外边距相遇，它们的边界会合并，结果的外边距宽度将是这些外边距中的最大值...
margin 属性用于设置元素的外边距，而 JavaScript 可以帮助我们动态地设置元素的 margin 属性。 margin 属性可以接受一个、两个、三个或四个参数，每种情况下 margin 的含义都不同。 一个参数 当我们设置 margin ...
第二种：父元素和子元素（或者最后一个元素）的外边距 第三种：空的块级元素的上下外边距 折叠的根本原因： margin之间直接接触，没有阻隔 折叠后外边距的计算： 1.如果两个外边距都是正值，折叠后的外边距取较大的...
CSS中的负外边距（negative margin）是一种强大的布局技巧，对于前端开发者来说是不可或缺的知识点。负外边距能够使元素在文档流中产生偏移，但与相对定位不同，它不会占据原本的空间，而是会让后面的元素填充这些...
在前端开发中，“margin折叠”是一个重要的CSS布局概念，它涉及到元素之间的外边距合并，对页面布局有显著影响。当我们设置多个相邻元素的外边距（margin）时，浏览器并不会简单地将这些外边距相加，而是遵循一定的...
`margin-collapse`是另一个与`margin`相关的概念，它描述了相邻元素之间外边距如何合并。当两个垂直或水平相邻的元素具有相同的外边距时，它们的外边距可能不会简单相加，而是取其中较大的那个。通过`margin-...