深入margin

1.margin与可视化尺寸

适用于没有设定固定的width和height普通block元素，

float,absolute,/fixed inline元素，table cell元素则不可以
经过设置margin值可以改变div的大小

---

---

应用

实现图片文字并排列的时候文字对齐

---

**同理当父元素容器没有设置width和height，利用图片的margin
可以改变容器的大小，用来元素的留白！其他元素则看似不行不会撑开元素其实是margin与父元素进行了重叠**如果父元素设置了宽高，则无法撑开元素，margin过大的话就会溢出！

---

margin的百分比

普通元素的margin百分比都是通过容器的margin来计算的与父容器的width无关！

绝对定位的margin百分比

margin重叠

解决方法

加入inline元素可以是空格&nbsp

一一对应来看：
非块状格式化：设置overflow：hidden
设置padding
设置border
设置inline元素在中间比如空元素  
设置height（干掉margin-bottom）

            1.外层padding

　　　　　　　　2.透明边框border:1pxsolidtransparent;

　　　　　　　　3.绝对定位postion:absolute根据定义他们不产生margin重叠:

　　　　　　　　4.外层DIVoverflow:hidden;

　　　　　　　　5.内层DIV　加float:left;display:inline;

　　　　　　　　6.外层DIV有时会用到zoom:1;

---

---

margin重叠的计算方式

margin auto

margin实现垂直居中

此时宽度不会自动填充，水平方向不会居中

margin 失效问题

• 1.内联元素（不包括img等替换元素）水平方向有效垂直方向无效
• 2.margin重叠导致无效
• 3.display：table-cell 和 table-row时无效果
• 但是例外的是替换元素比如img,即使设置了table-cell也有效果
• button为inline-block模式
• 4.相邻元素为float时margin无效，那是因为margin不够大；
• 5.当有内联元素和img(等替换元素在一起)img要和文本（内联元素）对齐所以有所限制！

文中图片来自：http://www.imooc.com/learn/680