margin

作者: 郭子林 | 来源:发表于2016-04-20 13:36 被阅读31次

margin

margin概念#####

margin属性给指定元素上下左右四个方向设置外边距(即指定元素距离其上下左右元素的距离)。
margin是margin-top,margin-right,margin-bottom和margin-left的缩写。

margin取值#####

margin初始值为margin:0;
<length>一个固定的数,可以为负数;
<percentage> 百分比,可以为负数(包含该块的元素的宽度);
auto 适当的值,可以用来使一个块元素水平居中。
当margin只有一个值时,作用于四个边;
当margin有两个值时,第一个值作用于上下,第二个值作用于左右;
当margin有三个值时,第一个值作用于上,第二个值作用于左右,第三个值作用于下;
当margin有四个值时,依次按照上右下左的顺序匹配(顺时针)。

负margin#####
  1. 使自己位移: margin-left/top:-10px;将自己向左/上移动10像素;
  2. 使周围元素位移:margin-right/bottom:-10px;
  3. 使元素宽度增加(前提该元素没有设定宽度)。
margin合并#####

1.当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
2.当一个元素包含在另一个元素中时(前提是外面的元素没有border且没有padding),它们的上和/或下外边距也会发生合并。
3.当一个空元素且没有边框但是有外边距top与bottom,在这种情况下,上外边距与下外边距也会发生合并。

注:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

block与inline元素中的margin#####

margin在块级元素下,上下左右任意设定。
margin应用在内联元素上,上下无作用,左右可设定。

相关文章

  • 盒模型 相关知识点总结

    1 . 盒模型包括的属性 margin:外边距:包含margin-top、margin-right、margin-...

  • css第三节(2)

    1、css外边距margin margin-top:上外边距 margin-right:右外边距 margin-b...

  • css学习之margin属性

    margin margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。 margin...

  • 4.CSS布局篇之margin负值问题

    margin-top和margin-left负值,元素向上、向左移动 margin-right和margin-bo...

  • css中的内外边距和背景

    css中margin、padding和background margin与padding margin常用代码有 ...

  • CSS外边距

    Margin margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的margin可以单...

  • html css

    1.margin 塌陷,与margin合并 margin合并不解决,直接设置一个box的margin即可 marg...

  • margin

    上下两个元素若margin都为正值,则取较大值;若margin都为负值,则两值相加;若margin一正一负,则两值相加;

  • margin

    margin [TOC] 一、布局与尺寸 1、margin普通情况下不影响可视尺寸,只有元素在 充分利用可用空间 ...

  • margin

    1. margin 与容器尺寸 两种容器尺寸: 可视尺寸:含 border 及以内的尺寸—— clientWidt...

网友评论

      本文标题:margin

      本文链接:https://www.haomeiwen.com/subject/mpizlttx.html