css - 盒子内外边距

css - 边距

元素内边距

内边距是指元素包含的内容离元素边框之间的间距，内边距不能设负值。内边距（padding）、（边框）border都会撑大盒子，在浏览器中显示的元素的尺寸可能包含了盒子的padding和border。

padding的取值

div {
    width: 200px;
    height: 200px;
    background: black;
    padding: 10px; /*上下左右都是10px*/
    padding: 10px 20px; /*上下10px 左右20px*/
    padding: 10px 20px 10px; /*上10px 左右20px 下10px*/
    padding: 10px 20px 10px 20px; /*上10px 右20px 下10px 左20px*/
    类似的还有padding-top、padding-bottom、padding-left、padding-right
}

元素外边距

外边距是指元素以某个对象的可见边界为参照的相对距离，外边距可设负值

margin的取值

div {
    width: 200px;
    height: 200px;
    background: black;
    margin: 10px; /*上下左右都是10px*/
    margin: 10px 20px; /*上下10px 左右20px*/
    margin: 10px 20px 10px; /*上10px 左右20px 下10px*/
    margin: 10px 20px 10px 20px; /*上10px 右20px 下10px 左20px*/
    margin-left:auto; /*自动*/
    margin-right:auto; /*自动*/
    margin:0 auto;  /*0 自动*/
    margin:auto; /*全自动(づ￣3￣)づ╭❤～*/
    类似的还有margin-top、margin-bottom、margin-left、margin-right
}

原始宽 | height 

元素的（width | height）（不包含padding、border、margin）

可见宽 | 可见高

（width | height）+ padding+border

隐形宽 | 隐形高

（width | height）+ padding + border + margin

外边距的参照对象

margin-left和margin-top的参照对象是其父元素或其兄弟元素，margin-right和margin-bottom的参照对象是其兄弟元素，如果margin-right和margin-bottom的参照对象是其父元素，则这两个属性会失效。

auto的默认值

元素的宽、高、上下左右外边距都可以设置为auto。元素的width和height默认都 = auto，表示其尺寸由其内容决定，但块元素的width=auto时，如果其左外边距是0，则是指它的宽度独占父元素一行，它的宽度=父元素的width。而左右外边距（margin-left、margin-right）和上下外边距（margin-top、margin-bottom）的默认值是0，而不是auto。所以，当你手动设置margin-bottom = 0 或margin-right = 0时（它们本来默认就是0）由于margin-top或margin-left = 0，所以margin-right、margin-bottom为0是无效的。

auto的应用

虽然元素的尺寸和其外边距都可以应用auto，但auto是否会起效需要具体规则：如果是块元素，当width没有明确的值时，三个属性中只有width会应用auto，为左右外边距设置的auto会被忽略，当width有明确设置的值时，为左右外边距设置的auto会被应用。如果是非块元素，其width和左右两个外边距（margin-left、margin-right）之中的其中一个能同时应用auto。而无论是块或非块元素，其height和上下外边距（margin-top、margin-bottom）之中的一个可以同时应用auto。

块元素 - 水平auto的值的计算方式  

如果width = auto，则：它的父元素的width - 它的左右外边距 = 它的width

如果width!=auto，且margin-left = auto ，则它的父元素的width - 它的width - 它的margin-right = 它的margin-left

如果width!=auto，且margin-right = auto，则它的父元素的width - 它的width - 它的margin-left = 它的margin-right

如果width!=auto，且margin-left和margin-right都= auto，则（它的父元素的width - 它的width）/ 2 = 它的左右外边距

注：如果减去的明确值是负数，则不再是减，而是加负数的绝对值等于结果。

注：如果当前元素存在padding或border，还需要减去padding或border。因为计算的是元素宽、左右外边距。

非块元素 - 水平auto的值的计算方式

如果width = auto，则；它的width = 它的内容的总宽度

如果margin-left = auto 或 margin-right = auto，则：它的margin-left = 0

垂直auto的值的计算方式

无论是块元素抑或非块元素，下面的公式是相同的

如果height = auto，则：height = 它所包含的内容

如果margin-top或margin-bottom = auto，则：margin-top=0

也即，在垂直方向上唯有height（原始高） = auto时，才有计算的必要。即它没有明确设置的高度值，此时auto的计算为：

非块元素：当前元素的height（原始高）= 它的第一个子元素的顶外边距到最后一个子元素的底外边距。

块元素：如果该块元素没有padding或border，且如果它包含的第一个元素是块元素，如果这个子块元素存在上边距，则父块元素不会包含它第一个子块元素的上外边距。同样的，父块元素也不会包含它的最后一个子块元素的底外边距。也即，该父块元素的height（auto）的计算只包含从它第一个子块元素的顶边框到它最后一个子块元素的底边框为止。如果希望块元素的原始高的计算方式能和其它非块类型的元素一样可以包含第一个子元素的上外边距和最后一个子元素的下外边距，则可以

1.设该元素的padding或border

2.设该元素overflow:hidden

块元素水平auto的几个计算的例子

计算width

.box {
    width: 400px;
    height: 50px;
    background: #4cff00;
}

.box div {
    margin-left: 100px;
    margin-right: -50px;
    height: inherit;
    background: #b6ff00;  子元素的width=父元素的原始宽width400-100+50=350px
}

计算width

.box {
    width: 400px;
    height: 50px;
    padding: 10px;
    border: 3px solid black;
    background: #0094ff;
}

.box div {
    margin-left: 10px;
    margin-right: -50px;
    height: 50px;
    width: auto;           
    background: #ff6a00; 子元素width：父元素的原始宽width400-10+50=440px 
}

计算margin-right

.box {
    width: 400px;
    height: 50px;
    border: 3px solid black;
    background: #ff3f3f;
}

.box div {
    margin-left: 10px;

    margin-right: -50px;       margin-right被浏览器强制设为auto width: 100px;
    width:100px;

    padding: 10px;
    border: 3px solid black;
    height: 20px;
    background: #ffd800;     子元素的margin-right：父元素的原始宽width400-10-100-10-10 =264px
}

计算margin-left

.box {
    width: 500px;
    height: 50px;
    background: #808080;
}

.box div {         
    width:100px;
    height: 50px;        
    margin-left:auto;
    background: #ff6a00; 子元素的margin-left：margin-right=0，父元素的width500 - 100 - 0  = 400
}

块元素水平居中的三种方法

由于行内/行内块元素会应用text-align:center，所以此处只为块元素的水平居中提供实现方案。

1.如果子元素没有明确设置宽度，设父元素左右padding为相同的值

2.如果子元素有明确设置宽度，则设子元素左右margin为相同的值，或margin:0 auto或margin：auto auto或margin：auto

计算相邻两个元素之间的外边距

当相邻两个元素都存在相邻外边距时，两个元素的相邻外边距究竟取哪一个元素的外边距呢？

计算相邻两个元素的正外边距

如果当前元素的相邻外边距小于它所参考的那个元素的外边距，则当前元素会在它所参考的那个元素相邻的外边距处停止偏移。考虑两张纸（两个兄弟），两张纸的margin-top是10px，而margin-bottom是20px，那么第二张纸的顶外边距就要以其兄弟（第一张纸）的可见高的边界为准进行偏移，但由于第一张纸的底外边距是20px，第二张纸的顶外边距小于第一张纸的底外边距，则第二张纸在偏移过程中会在离第二张纸的可见高的边界往下数20px处停止，而不是10px，因为它往上偏移时遇到了边界（阻力）。也即当两个元素的正反（相邻）边距（比如：第一个元素的底外边距与第二个元素的顶外边距）的值是两个正值时，则取最大的正值得出两个元素的结果边距

计算相邻两个元素的负外边距

1.当两个元素的相邻边距（比如：第一个元素的底外边距与第二个元素的顶外边距）的值是一正一负时，则两个值会相加得出两个元素的结果边距。考虑第一张纸的margin-bottom是20px，而第一张纸的margin-top是-20px，则20+(-20)=0，两张纸的边距是0。

2.当两个元素的正反（相邻）边距（比如：第一个元素的底外边距与第二个元素的顶外边距）的值是两个负时，则取绝对值最大的那个得出两个元素的负结果边距

注：当负外边距合并导致两个元素重叠在一起时，总是后面一个覆盖在前面一个元素上面

默认边距

很多html都有自己的默认样式，比如p、h1等，它们都带有默认的margin、ul列表类html元素带有默认的padding。

如果需要查看元素的默认样式，可以打开chrome的开发人员工具，在tab项目中选择Element查看元素，此时在右侧会出现该元素相关的style。在tab项style旁边有一个computed，点开它后勾选show all，即可查看该元素所有的css样式，也可以在搜索框输入你感兴趣的css属性，看某个属性在该元素上的设置。

默认情况下，很多元素都有margin、ul列表具有padding，为了把内外边距的控制权移交到自己手上，可以考虑使用*{margin:0;padding:0}，但*会拖慢浏览器解析效率，所以一般都需要逐个写出：

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, th, td, form, fieldset, input, textarea, select {
    margin: 0;
    padding: 0;
}

Css - 学习总目录