On my webpage, I have multiple repetitive product listings displayed.
<div class="col-lg-12 col-md-12 col-sm-12 ">
<div class="row">
@foreach (var item in Model.Products)
{
<div class="col-lg-3 col-md-3 col-xs-12 order-1 d-block mb-3 cart-col " style="padding-left:10px;">
<section>
<div class="cart-title text-center w-100" >
<a href="~/products/detail/@item.Id"> @item.Title</a>
</div>
<div class="thumb">
<a href="~/products/detail/@item.Id" class="d-block">
<img src="~/@item.ImageSrc">
</a>
</div>
<div class="cart-title">price:
<span class="cart-title">
@item.Price.ToString("n0")
</span>
</div>
</section>
</div>
}
</div>
</div>
As shown in the screenshot https://i.sstatic.net/z4rfr.jpg, the layout currently has no space between each product.
I would like to add margin between each book, maintaining the current configuration of products while having spacing between each column. If I modify the CSS like this:
<div class="col-lg-3 col-md-3 col-xs-12 order-1 d-block mb-3 cart-col " style="padding-left:10px;">
it results in the layout changing, as seen in this image <a href="https://i.sstatic.net/kA7nH.jpg" rel="nofollow noreferrer"></a>.</p>
<p>Is there a way to keep the current layout with each product in a row, but also have space between each column?</p>
<p>Here is the CSS code:</p>
<pre><code>.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom:15px;
}