您所在的位置： &
使用CSS margin属性轻松设置外边距
使用CSS margin属性轻松设置外边距
本文向大家介绍一下CSS margin属性用法，设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。
你对CSS外边距的概念是否了解，这里和大家分享一下设置外边距最简单的方法，设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的&空白&。
设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。
CSS margin属性
设置外边距的最简单的方法就是使用margin属性。
margin属性接受任何长度单位，可以是像素、英寸、毫米或em。
margin可以设置为auto。更常见的做法是为外边距设置长度值。下面的声明在h1元素的各个边上设置了1/4英寸宽的空白：
h1{margin:0.25}下面的例子为h1元素的四个边分别定义了不同的外边距，所使用的长度单位是像素(px)：
h1{margin:10px0px15px5}与内边距的设置相同，这些值的顺序是从上外边距(top)开始围着元素顺时针旋转的：
margin:toprightbottomleft另外，还可以为margin设置一个百分比数值：
p{margin:10%;}百分数是相对于父元素的width计算的。上面这个例子为p元素设置的外边距是其父元素的width的10%。
margin的默认值是0，所以如果没有为margin声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持CSS的浏览器中，外边距会在每个段落元素的上面和下面生成&空行&。因此，如果没有为p元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
还记得吗？我们曾经在前两节中提到过值复制。下面我们为您讲解如何使用值复制。
有时，我们会输入一些重复的值：
p{margin:0.5em1em0.5em1}通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：
p{margin:0.5em1}这两个值可以取代前面4个值。这是如何做到的呢？CSS定义了一些规则，允许为外边距指定少于4个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
下图提供了更直观的方法来了解这一点：
换句话说，如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。如果给定了两个值，第4个值会从第2个值复制得到，第3个值（下外边距）会从第1个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他3个外边距都由这个值（上外边距）复制得到。
利用这个简单的机制，您只需指定必要的值，而不必全部都应用4个值，例如：
h1{margin:0.25em1em0.5}&/*等价于0.25em1em0.5em1em*/ &h2{margin:0.5em1}&&/*等价于0.5em1em0.5em1em*/ &p{margin:1}&&&/*等价于1px1px1px1px*/ &&
这种办法有一个小缺点，您最后肯定会遇到这个问题。假设希望把p元素的上外边距和左外边距设置为20像素，下外边距和右外边距设置为30像素。在这种情况下，必须写作：
p{margin:20px30px30px20}这样才能得到您想要的结果。遗憾的是，在这种情况下，所需值的个数没有办法更少了。
再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是auto（左外边距是20px）：
p{margin:autoautoauto20}同样的，这样才能得到你想要的效果。问题在于，键入这些auto有些麻烦。如果您只是希望控制元素单边上的外边距，请使用单边外边距属性。
单边外边距属性
您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把p元素的左外边距设置为20px。不必使用margin（需要键入很多auto），而是可以采用以下方法：
p{margin-left:20}您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top &margin-right &margin-bottom &margin-left &&
一个规则中可以使用多个这种单边属性，例如：
h2{ &margin-top:20 &margin-right:30 &margin-bottom:30 &margin-left:20 &} &&
当然，对于这种情况，使用margin可能更容易一些：
p{margin:20px30px30px20}不论使用单边属性还是使用margin，得到的结果都一样。一般来说，如果希望为多个边设置外边距，使用margin会更容易一些。不过，从文档显示的角度看，实际上使用哪种方法都不重要，所以应该选择对自己来说更容易的一种方法。
提示和注释
提示：Netscape和IE对body标签定义的默认边距（margin）值是8px。而Opera不是这样。相反地，Opera将内部填充（padding）的默认值定义为8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于Opera中，那么必须对body的padding进行自定义。
CSS外边距属性
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&&&的更多文章
IE浏览器不支持很多CSS属性是出了名的，即便在支持的部分中，也
再过一次生日，我就满七十岁了。而且正如大家印象中一样，像我这个年纪的...
掌握一门技术，首要的是掌握其基础。笔者从事.NET相关
再过十几天很多同学又要爬楼梯睡觉，早上七点起床，晚
8月第二周，开发者们每月必看的编程语言排行榜如期而
《网络系统开发实例精粹》以实际的软件开发项目实例介绍贯穿始末，逐层深入的介绍了应用JSP开发Web应用程序的详细过程。全书以深
51CTO旗下网站body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
padding:0;
阅读(...) 评论()如何解决外边距margin叠加的问题探讨
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，那么如何使元素上下margin不折叠呢？下面的方法或许对大家有所帮助
一、首先你要知道什么情况下会触发：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠 1.两个或多个 说明其数量必须是大于一个，又说明，折叠是元素与元素间相互的行为，不存在 A 和 B 折叠，B 没有和 A 折叠的现象。 2.毗邻 是指没有被非空内容、padding、border 或 clear 分隔开，说明其位置关系。 注意一点，在没有被分隔开的情况下，一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻； 只有在一个元素的 height 是 &auto& 的情况下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。 3.垂直方向 是指具体的方位，只有垂直方向的 margin 才会折叠，也就是说，水平方向的 margin 不会发生折叠的现象。 二、那么如何使元素上下margin不折叠呢？ 1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素） 2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠） 我们都知道触发BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative） 很明显大家可以看出来相邻元素不发生折叠的因素是触发BFC因素的子集，也就是说如果我为上下相邻的元素设置了overflow:hidden，虽然触发了BFC，但是上下元素的上下margin还是会发生折叠 这个问题其实和BFC并没有太大的关系，希望大家不要滥用BFC，要知道BFC不是全能，创建BFC的初衷只是为了让元素本身（包括它的子元素）能够正确的计算自己的宽高。/blog//css-101-block-formatting-contexts 不发生折叠的触发因素是浮动元素、inline-block 元素、绝对定位元素，这个只是创建BFC因素的子集，但并不能说明创建了BFC的元素就不会发生折叠，因为BFC还可以用overflow:hidden来创建。相反如果父元素触发了BFC，那么他的块级子元素反而会发生折叠。 这里我写了一个DEMO来说明这个问题：/demo/collspan_demo.html 创建BFC的三种情况都提到了，结果是子元素的上下margin都会发生折叠 。 克军提到的最后一个zoom，这是IE浏览器最初支持的缩放属性，到现在只有最新的webkit核心的浏览器也支持。但只是在IE8以下的浏览器下才可成功触发hasLayout，对于非IE浏览器也是没有效果的，所以还是需要同样的去创建BFC。关于hasLayout与BFC的介绍可参见本人博客的文章/?p=174 关于最终如何解决这样的问题，我的建议是在写的时候尽量用同一方向的margin，比如都设置为top或者bottom，因为你在实践的时候有时不需要为每个元素设置浮动、inline-block或者absolute 。margin 外边距叠加问题~求高手 解释 谢谢_css吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：16,363贴子：
margin 外边距叠加问题~求高手 解释 谢谢收藏
如果一个框的上、下外边距相邻，则其外边距可能会穿过它而折叠。在这种情况下，该元素的位置由它与其它外边距被折叠的元素之间的关系决定。如果该元素的外边距与其父亲的上外边距折叠，则该框的上边框边缘与其父亲的相同。否则，该元素的父亲没有参与外边距折叠或者仅有父亲的下外边距参与。元素上边框边缘的位置与其下边框不为零时相同。注意，被贯穿而折叠的元素的位置不会影响其他的外边距和其一起折叠的元素的位置；其上边框边缘的位置仅用于定位这些元素的后裔。求各位高手解释上面的话。并帖代码验证！谢谢
此吧 没人了吗
问题可以去相关论坛(联动北方)提问，会有专家解答，学习资源也有！
不太懂，你想表达啥
不是就是margin折叠什么时候发生吗？手册里明明白白有！
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或margin详解垂直外边距合并-五星文库
免费文档下载
margin详解垂直外边距合并
导读：Margin垂直外边距合并，外边距合并指的是，当两个垂直外边距相遇时，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相，如果你读过了上面W3Shcool的CSS外边距合并的文章后，对于垂直外边距合并的解决方案上面已经解释了，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-tMargin的特性margin始终是透明的。margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。也可以使用简写的外边距属性同时改变所有的外边距：margin:(eg:margin:10px20px30px40px)记忆方式是元素周围正上方顺时针“上右下左”记忆。并且规范还提供了省略的数值写法，基本如下：1、如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10就等于margin:10px10px10px10a2、如果margin只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px20就等于margin:10px20px10px203、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px20px30就等于margin:10px20px30px204、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px20px30px40Margin垂直外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：示例：.top{width:160height:50background:#}.middle{width:160background:#}.middle.firstChild{margin-top:20}&divclass=&top&&&/div&&divclass=&middle&&&divclass=&firstChild&&我其实只是想和我的父元素隔开点距离。&/div&&divclass=&secondChild&&&/div&&/div&如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。margin在块元素、内联元素中的区别HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-likeelements），inline元素即是以”行”表现的元素（characterlevelelementsandtextstrings）。二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE|DL|DIV|NOSCRIPT|BLOCKQUOTE|FORM|HR|TABLE|FIELDSET|ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。inline元素（内联元素）大致有：#PCDATA（即文本）|TT|I|B|BIG|SMALL|EM|STRONG|DFN|CODE|SAMP|KBD|VAR|CITE|ABBR|ACRONYM|A|IMG|OBJECT|BR|SCRIPT|MAP|Q|SUB|SUP|SPAN|BDO|INPUT|SELECT|TEXTAREA|LABEL|BUTTON其中有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replacedelement）。他们区别一般inline元素（相对而言，称non-replacedelement）是：这些元素拥有内在尺寸(intrinsicdimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。或许有朋友对非置换元素（non-replacedelement）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replacedelement），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：“AnelementthatisoutsidethescopeoftheCSSformatter,suchasanimage,embeddeddocument,orapplet”从定义中我们可以理解到，置换元素（replacedelement）主要是指img,input,textarea,select,object等这类默认就有CSS格式化外表范围的元素。进而可知，非置换元素（non-replacedelement）就是除了img,input,textarea,select,object等置换元素以外的元素。margin在块级元素下，他的性能可以完全体现，上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。这是因为边界应用于内联元素时不改变元素的行高度，如果你要改变内联元素的行高即类似文本的行间距，那么你只能使用这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height，因为内联元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？这都说不准，所以统一都给每行定一个高，只能是line-height了。margin-top/margin-bottom对内联元素没有多大实际效果，不过margin-left/margin-right还是能够对内联元素产生影响的。应用margin:10px20px30px40，左边这个css如果写在inline元素上，他的效果大致是，上下无效果，左边离他相邻元素或者文本距离为40px，右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。最后在内联元素中还有上文我们提到的非可置换inline元素（non-replacedelement），这些个元素img|input|select|textarea|button|label虽然是内联元素，但margin依旧可以影响到他的上下左右！总结下来margin属性可以应用于几乎所有的元素，除了表格显示类型（不包括table-caption,tableandinline-table）的元素，而且垂直外边距对非置换内联元素（non-replacedinlineelement）不起作用。包含总结汇报、办公文档、IT计算机、资格考试、文档下载、计划方案、党团工作、人文社科以及margin详解垂直外边距合并等内容。
相关内容搜索}