前端_margin负值的相关问题

上下排列情况

html部分 

  <div class="container">
    <div class="box box-top"></div>
    <div class="box box-bottom"></div>
  </div>

css部分 

    .container {
      border: 1px solid #ddd;
      padding: 10px;
    }
    .box {
      width: 100px;
      height: 100px;
    }
    .box-top {
      border: 1px solid orange;
    }
    .box-bottom {
      border: 1px solid green;
    }

---

 当给.box-top加上margin-top=-10px时

 

 元素向上拖拽10px

---

当给.box-top加上margin-bottom=-10px时 

 

 元素本身不变，下边元素上移10px

---

左右排列情况 

 

html部分 

  <div class="container clearfix">
    <div class="box box-left"></div>
    <div class="box box-right"></div>
  </div>

css部分

    .clearfix::after {
      content: '';
      display: table;
      clear: both;
    }
    .container {
      border: 1px solid #ddd;
      padding: 10px;
    }
    .box {
      width: 100px;
      height: 100px;
    }
    .box-left {
      border: 1px solid orange;
      margin-bottom: -10px;
    }
    .box-right {
      border: 1px solid green;
    }
    .box-left,
    .box-right {
      float: left;
    }

---

当给.box-left加上margin-left=-10px时

 

元素向左拖拽10px 

---

当给.box-left加上margin-right=-10px时 

 

元素本身不变，右边元素左移10px

---

结论 

margin-top 为负值时，元素向上拖拽。 
margin-left 为负值时，元素向左拖拽。
margin-bottom 为负值时，元素本身不变，下边元素上移。
margin-right 为负值时，元素本身不变，右边元素左移。