jQuery - Flip：翻转div的大小小于前div

Question

我正在使用这个jQuery-Plugin：https://nnattawat.github.io/flip/

问题在于，当我翻转一个div时，翻转的div比它应该小。看一下这个gif：

我希望翻转的div的大小与原始div相同。出了什么问题？

这是我的实施：

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="<%=i%>" value="<%=card[1]%>" class="flip p-2">

      <div class="front yellowishcard text-center cardsize p-3">
        <%= card[0] %>
      </div>

      <div class="back yellowishcard text-center cardsize p-3">
        <%= card[0] %>
      </div>

    </div>
  </div>

正如你所看到的，两个div都有相同的类，除了＆＃39; front＆＃39;和＆＃39;回来＆＃39;我检查了我的css文件，但我没有在前面或后面添加任何样式。

我的css：

.yellowishcard {
    background: #F3E380;
    background-image: -webkit-linear-gradient(top, #F3E380, #E7C700);
    background-image: -moz-linear-gradient(top, #F3E380, #E7C700);
    background-image: -ms-linear-gradient(top, #F3E380, #E7C700);
    background-image: -o-linear-gradient(top, #F3E380, #E7C700);
    background-image: linear-gradient(to bottom, #F3E380, #E7C700);
    -webkit-border-radius: 11;
    -moz-border-radius: 11;
    border-radius: 11px;
    -webkit-box-shadow: 4px 4px 10px #666666;
    -moz-box-shadow: 4px 4px 10px #666666;
    box-shadow: 4px 4px 10px #666666;
}

.cardsize {
    height: 250px !important;
    display:flex;
    align-items:center;
}

＆＃39; P-2＆＃39;和＆＃39; p-3＆＃39;是来自bootstrap 4的类：https://v4-alpha.getbootstrap.com/utilities/spacing/

＆＃39;翻转＆＃39;没有造型，只有我的javascript可以工作。

当我只使用这些类时会出现同样的问题：back yellowishcard和front yellowishcard。

Answer 1

我发现了问题。问题由 KresimirPendic 暗示。问题是由p-2引起的。当我将p-2改为m-2时，问题就消失了。工作实施：

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="<%=i%>" value="<%=card[1]%>" class="flip m-2">

  <div class="front yellowishcard text-center cardsize p-3">
    <%= card[0] %>
  </div>

  <div class="back yellowishcard text-center cardsize p-3">
    <%= card[0] %>
  </div>

</div>