css-margin

208 阅读2分钟

和padding一样,margin百分比无论是水平方向还是垂直方向都是相对于父元素的width计算的;

和padding一样,初始值是0;

margin合并:块级元素的上边距和下边距有时合并为单个外边距;

(1)块级元素,但不包括浮动和绝对定位元素,尽管浮动和绝对定位可以让元素块状化;

(2)只发生在垂直方向上,与writing-mode垂直的方向。

margin合并的3中场景:

(1)相邻兄弟元素margin合并。

(2)父级和第一个/最后一个子元素。

解决margin-top合并:

  • 父元素设置为块状格式化上下文元素,比如overflow:hidden;
  • 父元素设置border-top值;
  • 父元素设置padding-top值;
  • 父元素和第一个子元素之间添加内联元素进行分隔。

解决margin-bottom合并:

  • 父元素设置为块状格式化上下文元素;
  • 父元素设置border-bottom值;
  • 父元素设置padding-bottom值;
  • 父元素和最后一个子元素之间添加内联元素进行分隔;
  • 父元素设置height、min-height或max-height。
(3)空块级元素的margin合并。
解决方法:
  • 设置垂直方向的border;
  • 设置垂直方向的padding;
  • 里面添加内联元素(直接Space键无效);
  • 设置height/min-height。

margin:auto就是为块级元素左中右对齐而设计的,和内联元素使用text-align空中左中右对齐遥相呼应;

margin:auto填充规则:

(1)如果一侧定值,一侧auto,则auto为剩余空间大小;

(2)如果两侧auto;则平分剩余空间。

利用margin:auto的计算空间和绝对定位格式化宽度/高度做水平垂直居中:

.father{
    width:300px;
    height:300px;
    position:relative;
}
.son{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100px;
    height:100px;
    margin:auto;
}