padding-bottom：100px;和margin-bottom:-100px;这两个属性可以互换吗？

Question

感觉这两个属性的padding-bottom：100px;和margin-bottom:-100px;作用一样。但在实际应用时总出问题？

Answer 1

一个是内边距，一个是外边距，怎么可能是一样呢？
首先你得清楚盒子模型！
想知道是否作用一样，动手写个demo不就清楚了吗？
情况一：（使用padding-bottom：100px;）

//html


<div class="box1"></div>




<div class="box2"></div>



//css
.box1,.box2{
  width: 100px;
  height: 100px;
}
.box1{
  background: red;
  padding-bottom: 100px;
}
.box2{
  background: green;
}

效果：

情况二：（使用margin-bottom：-100px;）

//css
.box1,.box2{
  width: 100px;
  height: 100px;
}
.box1{
  background: red;
  margin-bottom: -100px;
}
.box2{
  background: green;
}

效果：

see?

Answer 2

padding-bottom: 100px; 和 margin-bottom: -100px; 是两个不同的css 属性。一个用于设置内边距，一个用于设置外边距。
但是对于margin为负值的情况有一个更犀利的称号“负边距”
简单的说就是：如果margin 为正值，边距是向外扩张的，为负值就是向里收缩。
这里有篇文章讲的不错， 负边距