`
huohouha
  • 浏览: 4931 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

有关外边距margin

    博客分类:
  • HTML
 
阅读更多

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始终居中,不随浏览器窗口的大小变化。

 

 

  • 大小: 11.2 KB
分享到:
评论

相关推荐

    08_盒子模型-外边距-margin.html

    08_盒子模型-外边距-margin

    外边距+内边距

    在网页布局中,`margin`(外边距)和`padding`(内边距)是非常重要的概念。它们主要用于控制元素与其周围元素之间的空间,是CSS中最常用也是最基本的属性之一。接下来,我们将详细探讨这两种属性的特点、用法及其在...

    外边距折叠1

    在CSS布局中,外边距折叠(Margin Collapsing)是一个重要的概念,它涉及到元素间的垂直间距处理。这个现象主要发生在相邻元素的垂直外边距上,尤其是兄弟元素和父子元素之间的关系。我们来深入探讨这个主题。 首先...

    盒模型的介绍,以及margin(外边距)padding(内边距)的使用.zip

    4. **外边距(Margin)**:边框之外的空间,用于调整元素与其他元素之间的距离。`margin`属性用于设置外边距,同样有上、右、下、左四个方向。 在CSS中,有两种盒模型:标准盒模型(W3C盒模型)和IE盒模型(怪异盒...

    详解css外边距折叠(margin collapsing)

    CSS中的外边距折叠指的是相邻的两个或多个块级元素的外边距(margin)会合并成一个外边距。这种情况在块级元素垂直排列时尤为常见,比如相邻兄弟元素之间、父元素与第一个或最后一个子元素之间以及空的块级元素之间...

    如何解决外边距margin叠加的问题探讨

    在CSS布局中,经常会遇到块级元素垂直外边距(margin)发生叠加的问题,这通常称为margin叠加或外边距折叠。当两个或多个毗邻的块级元素垂直方向上的margin相遇时,它们会以较大者的margin值作为一个统一的margin值...

    03_5.4.1外边距5.4.2外边距合写.mp4

    margin 外边距 :盒子与盒子之间距离 学习前端html 基础内容,margin 外边距的基本属性

    解决margin 外边距合并问题

    在网页布局设计中,CSS(层叠样式表)的margin外边距合并是一个常见的问题,尤其是在元素间的间距处理上。这种现象通常被称为“外边距塌陷”(Margin Collapsing),它涉及到相邻或嵌套元素的外边距计算方式。下面...

    CSS的margin和padding

    1. **单独设置**:可以通过`margin-top`、`margin-right`、`margin-bottom`和`margin-left`单独设置各个方向的外边距。 2. **简写形式**:使用`margin`属性可以一次性设置所有方向的外边距,如`margin: 10px 20px 30...

    使用HTML开发商业网站-块元素垂直外边距的合并课件.pptx

    例如,如果父元素有0的`margin-top`,而子元素的`margin-top`是40px,那么父元素的实际外边距将会被扩展到40px,这样可以使得子元素与父元素的其他内容保持一定的间距。 然而,如果父元素有非零的上内边距或边框,...

    css中margin的缩写

    其中,`margin`属性是CSS中最常用的一个属性之一,用于设置元素外边距,即元素与其他元素之间的空白距离。为了简化CSS代码编写过程,提高代码可读性及维护性,CSS允许对`margin`属性进行缩写。 #### Margin属性的...

    Css中内边距、边框和外边距的关系.docx

    在CSS(层叠样式表)中,内边距(Padding)、边框(Border)和外边距(Margin)是布局和设计网页时不可或缺的概念。它们共同决定了元素在页面上的显示方式以及元素之间的空间关系。 首先,元素框的内部是内容区...

    CSS margin(外边距)

    CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。 margin 可以单独改变元素的上,下,左,右边距,也可以一次...

    CSS外边距合并代码

    在CSS布局中,外边距(Margin)是一个重要的概念,它指的是元素边框之外的空白区域,用于控制元素之间的空间。外边距合并是CSS布局中一个常见的现象,特别是涉及到元素垂直排列时。当我们为相邻元素设置外边距时,...

    CSS 外边距(margin)重叠及防止方法

    在CSS布局中,外边距(margin)的重叠是一个常见的现象,特别是在处理多个垂直相邻的块级元素时。按照W3C规范,当两个或多个块级元素的垂直外边距相遇,它们的边界会合并,结果的外边距宽度将是这些外边距中的最大值...

    JavaScript设置Div的margin参数

    margin 属性用于设置元素的外边距,而 JavaScript 可以帮助我们动态地设置元素的 margin 属性。 margin 属性可以接受一个、两个、三个或四个参数,每种情况下 margin 的含义都不同。 一个参数 当我们设置 margin ...

    详解CSS外边距折叠引发的问题

    第二种:父元素和子元素(或者最后一个元素)的外边距 第三种:空的块级元素的上下外边距 折叠的根本原因: margin之间直接接触,没有阻隔 折叠后外边距的计算: 1.如果两个外边距都是正值,折叠后的外边距取较大的...

    常用技巧margin负外边距的使用介绍

    CSS中的负外边距(negative margin)是一种强大的布局技巧,对于前端开发者来说是不可或缺的知识点。负外边距能够使元素在文档流中产生偏移,但与相对定位不同,它不会占据原本的空间,而是会让后面的元素填充这些...

    margin折叠

    在前端开发中,“margin折叠”是一个重要的CSS布局概念,它涉及到元素之间的外边距合并,对页面布局有显著影响。当我们设置多个相邻元素的外边距(margin)时,浏览器并不会简单地将这些外边距相加,而是遵循一定的...

    margin(CSS语法)-.rar

    `margin-collapse`是另一个与`margin`相关的概念,它描述了相邻元素之间外边距如何合并。当两个垂直或水平相邻的元素具有相同的外边距时,它们的外边距可能不会简单相加,而是取其中较大的那个。通过`margin-...

Global site tag (gtag.js) - Google Analytics