css_margin

系统默认样式

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

html

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

居中对齐

css

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

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

margin百分比

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

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

  #demo{width: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>

css_margin

原文：https://www.cnblogs.com/menghu1994/p/12205681.html