如何在計算圖像寬度時引入邊距？

Question

以下代碼生成磚石布局：

<ngx-masonry  class="masonry" [options]="myOptions">
  <div ngxMasonryItem class="masonryItem" *ngFor="let post of posts;index as idx" (click)="showPostDetail(post)" >
    <div class="crop">{{post.description}}</div>
    <img [src]="imgConstructor(post.img)">
  </div>
</ngx-masonry>

現在的css代碼：

.masonryItem {
    padding: 7px;
    margin-top: 5px;
    background-color: darkgoldenrod;
    border: 0.4px solid black;
    width: 20%;
}

.masonryItem img {
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
} 

由於每個項目的寬度為 20%，因此連續顯示五張圖像。 但是現在我想在masonryItem類的 css 代碼中包含一個邊距屬性

.masonryItem {
   margin: 1rem
}

但是這樣一來，磚石網格的右側就只有 4 張圖像和一些空間。 那么如何在我的寬度計算中引入邊距屬性，以便每行顯示五個圖像？

我的解決方案：

添加帶有 1rem 的邊框屬性：

.masonryItem{
  border: 1rem solid white;
}

如果 background-color 和 border-color 相同，它看起來像 margin 1rem 。 那么每行的圖像數量是相同的。

Answer 1

如果您正在使用這個庫： https : //github.com/wynfred/ngx-masonry ，有一個gutter屬性應該允許改變項目之間的距離。

Answer 2

對於這種顯示，您可能應該對元素之間的空間使用帶有“gap”屬性的“display: flex”。