首页 > padding-bottom:100px;和margin-bottom:-100px;这两个属性可以互换吗?

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

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


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


一个是内边距,一个是外边距,怎么可能是一样呢?
首先你得清楚盒子模型
想知道是否作用一样,动手写个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?

【热门文章】
【热门文章】