`
huohouha
  • 浏览: 4690 次
  • 性别: 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
分享到:
评论

相关推荐

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

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

    HTML5&CSS3网页制作:边距属性.pptx

    边距属性 边距属性 01 CSS的边距属性包括“内边距”和“外边距”两种 内边距 外边距 外边距 内边距(内填充) padding-top:上边距; padding-right:右边距;...margin:5px 3px /*上下外边距为5像素,左右外边距为3像素*/

    解决margin 外边距合并问题

    一、兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二、嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框,则父元素...

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

    外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距,本文详细的介绍了一下css外边距折叠的实现,分为3种情况,非常具有实用价值,需要的朋友可以参考下

    CSS margin(外边距)

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

    CSS的margin和padding

    你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你...

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

    两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠,那么如何使元素上下margin不折叠呢?下面的方法或许对大家有所帮助

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

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

    CSS中如何解决外边距塌陷问题

    首先我们先看出现外边距塌陷的三种情况: 1.当上下相邻的两个块级元素相遇,上面的元素有下边距margin-bottom,下面的元素有上边距margin-top,则它们之间的垂直距离取两个值中的较大者。 &lt;style&gt; .box1 { ...

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

    css中的负边距(negative margin)是布局中的一个常用技巧,很多特殊的css布局方法都依赖于负边距,下面就为大家详细介绍下

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

    本文及介绍了盒子模型的组成,以及部分盒模型标签的使用,主要有边框的设置,以及内外边距值得设置,以及在使用中的注意事项都有相关说明

    使用绝对定位+负外边距让DIV层水平垂直居中页面

    可以实现,但垂直居中使用外边距是无法达到效果的。(页面设置height:100%;是无效的),这里使用绝对定位+负外边距的方式来实现垂直居中,但同时要考虑页面重置大小的情况,需要使用js来修正。 1、让层水平居中 ...

    深入解析CSS中margin属性的使用

    外边距的 margin-width 的值类型有:auto | length | percentage也可以使用简写的外边距属性同时改变所有的外边距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方...

    CSS边距属性定义是用margin还是用padding的两者对比

    也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南 padding称呼为内边距,其...

    关于css中margin的值和垂直外边距重叠问题

    并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的! &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &...

    CSS外边距合并代码

    我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距。设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法就是设置padding了。设置内边距没什么好说的,设置的值是多少就是...

    你真的了解margin吗?你知道margin有什么特性吗?

    写css,你少不了与margin打交道。你真的了解margin吗?...也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可

    详解盒模型大小取决于它的padding,margin,border数值

    盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding,边框外的空白是外边距margin,如下所示,这个盒模型元素框的宽度值=内容...

Global site tag (gtag.js) - Google Analytics