min-width与margin的关系?

jzsn
  • 204

最近遇到一个这样的场景,不知道其中的原理,希望会的大神能帮小白解答一下,谢谢

<style>

.wraper{
  background: red;
  min-width: 50px;
  display: flex;
  height:200px;
  line-height: 200px;
  width: 500px;
  color:#fff;
  margin:10px auto;
}
.desc{
  flex:1;
  background: #000;
}
.arrow{
  background: green;
  margin-right: 10px
}
.arrow1{
  background: green;
  margin-right: -10px
}
.wraper-item{
  min-width: 100px;
}

</style>
<div class="wraper">

<span class="desc">图标容器的 => margin-right:10px</span>
<div class="wraper-item">
  <span class="title">锡林郭勒盟</span>
  <span class="arrow">图标</span>
</div>

</div>
<div class="wraper">

<span class="desc">图标容器的 => margin-right:-10px</span>
<div class="wraper-item">
  <span class="title">锡林郭勒盟</span>
  <span class="arrow1">图标</span>
</div>

</div>

clipboard.png

问题就是 红色的div我设置了min-width,但是为啥margin-right为负值的时候,红色的div未能将其包裹,而正值的时候却能将其包裹,这是什么原理?

回复
阅读 955
2 个回答

正值的时候图标离右边边框10px,负值的时候会超出右边边框10px;一来一回差20px。

宣传栏