CSS的間距問題

Question

在我的本地服務器中，產品框填充為頁面的整個寬度，因為它們被設置為100％的完整值。 邊界顯示得很好。

但是在我的實時測試站點上，它沒有填充100％，並且在最右邊有一個空白。 以及產品之間的邊界消失了……似乎懸停效果正坐在正確的寬度上，因為它在產品圖像的右側溢出。

此處的實時站點： http : //pagedev.co.uk/hoppings/products/

這是每個產品包裝盒的CSS：

.grid-wrapper {
    width:100%;
    height:auto;
    margin:0px auto;
}

.grid-wrapper img{
    width:99.8%;
    height:auto;
}

.grid-item {
    width:20%;
    margin-right:-6px;
    margin-bottom:0px;
    display:inline-block;
    vertical-align:top;
    border:1px solid #cfd0d1;
    border-top:0px solid #cfd0d1;   
    background-color:#ffffff;

    @media #{$l-desktop} {
        width:25%;
        margin-right:-6px;
    }

    @media #{$desktop} {
        width:33.2%;
        margin-right:-5px;
    }

    @media #{$mobile} {
        width:50%;
        margin-right:-5px;
    }
}



.image-hovers {
    width:100%;
    height:auto;
    position:relative;
}

.product-hover{
    position:absolute;
    visibility: hidden;
    opacity: 0;
    width:100%;
    height:100%;
    top:0px;
    margin:0 auto; left:0px;
    z-index:100;


    background-image: url("../images/plus.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-position:fixed;
    background-size:55px 55px;
    background-color:$red;

    @include transition(0.5s);
}

Answer 1

我猜您的服務器（或構建過程）正在最小化HTML（也許使用PageSpeed或類似的模塊），從而刪除了CSS所依賴的框之間的空間。 您似乎使用負邊距來解決空格問題，但是真正的解決方案是：從HTML中刪除空格，然后還可以從CSS中刪除負邊距。

Answer 2

刪除margin-right ，並將box-sizing設置為border-box ：

.grid-wrapper {
  width:100%;
  height:auto;
  margin:0px auto;
}

.grid-wrapper img {
  width:99.8%;
  height:auto;
}

.grid-item {
  box-sizing: border-box;
  width:20%;
  /*margin-right:-6px;*/
  margin-bottom:0px;
  display:inline-block;
  vertical-align:top;
  border:1px solid #cfd0d1;
  border-top:0px solid #cfd0d1;   
  background-color:#ffffff;

  @media #{$l-desktop} {
    width:25%;
    /*margin-right:-6px;*/
  }

  @media #{$desktop} {
    width:33.3333%; /*33.2 will leave space on the right.*/
    /*margin-right:-5px;*/
  }

  @media #{$mobile} {
    width:50%;
    /*margin-right:-5px;*/
  }
}

Answer 3

試試這個.grid-item{box-sizing: border-box; margin-right: 0;} .grid-item{box-sizing: border-box; margin-right: 0;}

   @media (max-width: 1400px) {
.grid-item {margin-right:0;}
}  /* put margin-right 0 here */ 

Answer 4

我還不能發表評論 這不是答案，只是一種快速解決方案

.grid-wrapper {
   width: 101%;
}