深入css中的margin

深入css中的margin

第一：margin-top

css代码（元素没有任何定位的情况下，并且元素默认为block）

<style type="text/css">
 /*这里值得注意的一点是：
  所以当inner元素设置margin-top的时候
  它margin的对象是我们的body
  而不是我们的outer元素
  要控制我们的inner 只能使用我们的padding；
  或则把inner改成是inline-block；
 */
 .inner{
     width:100px;
     height:100px;
     background:green;
     margin-top:130px;
 }
  .outer{
     width:200px;
     height:200px;
     background:blue;
     display:block;
 }
</style>

html

  <div class="outer">
   <div class="inner"></div>
  </div>

效果：（原因，div默认的是我们块级元素，它是独占一行的，当margin-top的时候，整个行，都会移动，再看看我们margin-left 就会明白了）

ps：如果元素浮动起来情况又不一样了

接下来我们将inner元素display改成inline-block后看效果；

第二：关于margin-right

css：

 /*
  我们的div默认的是块级别元素；
  它会独占一行，
  所以当我们设置它的margin-right是没有效果的；
 */
  .outer{
     width:200px;
     height:200px;
     background:blue;
     display:block;
     margin-right:10px;
     margin-right:1000px;/*都是同样的效果滴呀*/
 }

效果：原地不动，也就是我们的margin-right没效果；（原因：还是因为它是块级别元素，会占领整个一行）

第三：margin-left

css

  .outer{
     width:200px;
     height:200px;
     background:blue;
 }
 .inner{
     width:100px;
     height:100px;
     background:red;
     /*但是很奇怪额事情是
     当我们margin-left的时候却不会
     “带动”我们的outer滴呀
 */
     margin-left:300px;
 }

html

 <div class="outer">
    <div class="inner"></div>
  </div>

效果：

关于margin，

我们还得看具体的情况，块级元素，内联元素，块级-内联元素又是不一样的情况了，

还有我们元素是否浮动情况滴呀；