css_margin

系统默认样式

writing-mode: horizontal-tb;direction: ltr;

---

html

<div id="demo">
    <p>content</p>
</div>

居中对齐

css

 #demo{1000px;height:600px;margin:auto;}

• 在系统默认样式前提下，margin auto在B，D方向自适应，在A，C方向margin为0

margin百分比

  #demo{1000px;height:600px;}
  #demo p{margin:10% 5%;}

• margin:10% 5%;折算成像素为margin:100px 50px;
• 在系统默认样式前提下，margin百分比是以父元素width为基准，1000x5%=50;

  #demo{1000px;height:600px;  
    -webkit-writing-mode: vertical-rl; /* for webkit engine */
    writing-mode: tb-rl; /* for ie */}
  #demo p{margin:10% 5%;}

• 改变系统默认样式方向，此时margin以父元素height为基准，margin:60px 30px 60px 30px;

margin上下外边距重叠

.div1{margin-bottom:20px;background:red;}
.div2{margin-top:20px;background:green;}
<div class="div1"></div>
<div class="div2"></div>

• 如何避免外边距重叠
  • margin 折叠元素只发生在块元素上；
  • 浮动元素不与其他元素 margin 折叠；
  • 定义了属性overflow且值不为visible（即创建了新的块级格式化上下文）的块元素，不与它的子元素发生margin 折叠；
  • 绝对定位元素的 margin 不与任何 margin 发生折叠。
  • 特殊：根元素的 margin 不与其它任何 margin 发生折叠；
  • 如果常规流中的一个块元素没有 border-top、padding-top，且其第一个浮动的块级子元素没有间隙，则该元素的上外边距会与其常规流中的第一个块级子元素的上外边距折叠。
  • 如果一个元素的 min-height 属性为0，且没有上或下边框以及上或下内边距，且 height 为0或者 auto，且不包含行框，且其属于常规流的所有孩子的外边距都折叠了，则折叠其外边距。
    • 总而言之，改成非块元素，浮动，定位，overflow：hidden