html/css（ionic）の要素間のスペースを削除します

Question

イオンは2つの要素の間の空白を削除しようとしています。ここで

は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; 
} 

は.TESTクラスは、要素間の空白を削除することになっているではありませんか。もしそうでなければ、なぜ誰かが私に説明することができますか？

これを行う適切な方法は何ですか？

ありがとうございます。

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; 
}