为什么CSS的显示方式不同，即使是完全相同的元素？

Question

我有4个相同的面板。但是，在我的浏览器中，我注意到一个元素的样式实际上看起来不同，因为我用黄色圈出来。红色背景漏掉了。为什么会这样？

//HTML
<%= 4.times do %>
<div class="col-lg-3">
<div class="profile_card">
  <div class="card_image">
  </div>
  <div class="card_info">
  </div>
  <div class="card_username">
  </div>
</div>
</div>
<% end %>

和

//CSS.SCSS
.profile_card {
  background-color: red;
  position: relative;
  min-height: 200px;

  .card_image {
    position: absolute;
    width: 78%;
    left: 0;
    top: 0;
    bottom: 0;
    height: 75%;
    background-color: green;
  }

  .card_info {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 22%;
    margin-left: 78%;
    height: 75%;
    background-color: blue;
  }

  .card_username {
    position: absolute;
    bottom:0;
    height:25%;
    background-color: orange;
  }
}

Answer 1

给.card-image, .card-info { float:left; }

而不是向.card-info提供左边距。

Answer 2

使用box-sizing

*{
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box
}