html - 为什么 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 左边距。