刪除html/css中元素之間的空格（離子）

Question

我試圖去除這兩個元素之間的空白區域，在離子中。

下面是HTML：

<link rel="StyleSheet" type="text/css" href="./css/style.css" /> 
<ion-view name="tab-suppliers"> 
    <ion-content> 

    <h2 class="no-padding bg-lightblue font-white tb-header"><center>TITLE!</center></h2> 

    <div class="row text-center bg-lightblue font-white test"> 
     <div class="col col-25"> 
     TEST 
     </div> 
     <div class="col col-25"> 
     TEST 
     </div> 
     <div class="col col-25"> 
     TEST 
     </div> 
     <div class="col col-25"> 
     TEST 
     </div> 
    </div> 
    </ion-content> 
</ion-view> 

這裏是CSS：

.bg-lightblue { 
    background-color: #99CEFF; 
} 

.text-center { 
    text-align: center; 
} 

.font-white { 
    color: white; 
} 

.tb-header { 
    width: 100%; 
    margin-top: 0; 
    margin-left: 0; 
    margin-right: 0; 
} 


.test { 
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
} 

是不是。測試類應該刪除元素之間的空白？如果不是，有人能解釋我爲什麼嗎？

什麼是正確的方法來做到這一點？

在此先感謝。

Answer 1

<h2>元素具有默認bottom-margin，這會導致您的<h2>和<div>之間的空間。所以你必須刪除這個邊界。請看下面的例子：

.bg-lightblue { 
 
    background-color: #99CEFF; 
 
} 
 
.text-center { 
 
    text-align: center; 
 
} 
 
.font-white { 
 
    color: white; 
 
} 
 
.tb-header { 
 
    width: 100%; 
 
    margin-top: 0; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 
h2 { 
 
    margin-bottom: 0px; 
 
}

<ion-view name="tab-suppliers"> 
 
    <ion-content> 
 
    <h2 class="no-padding bg-lightblue font-white tb-header"><center>TITLE!</center></h2> 
 
    <div class="row text-center bg-lightblue font-white test"> 
 
     <div class="col col-25"> 
 
     TEST 
 
     </div> 
 
     <div class="col col-25"> 
 
     TEST 
 
     </div> 
 
     <div class="col col-25"> 
 
     TEST 
 
     </div> 
 
     <div class="col col-25"> 
 
     TEST 
 
     </div> 
 
    </div> 
 
    </ion-content> 
 
</ion-view>

Answer 2

嘗試：

h2 { 
    margin-bottom: 0; 
} 

/* should target any .row immediately proceeded by an <h2> */ 
h2 ~ .row { 
    padding-top: 0; 
}