div間の垂直の空白を取り除く方法

私のボーダのあるdivの間に空白があります。ここでのソリューションのほとんどは、幅と高さのような他の側面を持っていたdivsとは異なりますが、私のものは純粋なテキストです。div間の垂直の空白を取り除く方法

.h1z1 { 
 
    text-align: center; 
 
} 
 
.g1 h2, .g2 h2, .g3 h2 { 
 
    padding: 10px; 
 
    background-color: #ccffcc; 
 
} 
 
.g1, .g2, .g3 { 
 
    border-left: 6px solid #00ff00; 
 
}

<body style="font-family: 'Source Code Pro', monospace;"> 
 
    <div class="header"></div> 
 
    <div class="gtitle"> 
 
    <h1 class="h1z1">Graphics Cards</h1> 
 
    <hr /> 
 
    </div> 
 
    <div class="g1"> 
 
    <h2>Titan XP</h2> 
 
    </div> 
 
    <div class="g2"> 
 
    <h2>Titan X (Pascal)</h2> 
 
    </div> 
 
    <div class="g3"> 
 
    <h2>GeForce GTX 1080ti</h2> 
 
    </div> 
 
</body>

出典

2017-11-04 ConfusedCodeCat

.g1 h2, .g2 h2, .g3 h2にmargin:0;を与えます。 h2にはデフォルトのマージンがあるためです。

.h1z1{ 
 
    text-align: center; 
 
} 
 

 
.g1 h2, .g2 h2, .g3 h2{ 
 
    padding: 10px; 
 
    background-color: #ccffcc; 
 
    margin:0; 
 
} 
 

 
.g1, .g2, .g3{ 
 
    border-left: 6px solid #00ff00; 
 
}

<body style="font-family: 'Source Code Pro', monospace;"> 
 
    <div class="header"></div> 
 
    <div class="gtitle"> 
 
    <h1 class="h1z1">Graphics Cards</h1> 
 
    <hr /> 
 
    </div> 
 
    <div class="g1"> 
 
    <h2>Titan XP</h2> 
 
    </div> 
 
    <div class="g2"> 
 
    <h2>Titan X (Pascal)</h2> 
 
    </div> 
 
    <div class="g3"> 
 
    <h2>GeForce GTX 1080ti</h2> 
 
    </div> 
 
</body>

出典

2017-11-04 04:36:49

素晴らしい、ありがとう！私は解決策が私が思ったよりも簡単だったと思う。 – ConfusedCodeCat

大歓迎..... ..... –

答えがお役に立てば正解としてください。 –

div間の垂直の空白を取り除く方法

答えて

関連する問題