2016-04-18 4 views
0

divの上に約68ピクセルのギャップがあります。何がありますか?この特定のhtmlページの上にあるギャップは何ですか?

.mast_head { 
 
    background: rgba(35, 35, 163, 1); 
 
    background: -moz-linear-gradient(top, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%); 
 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(35, 35, 163, 1)), color-stop(51%, rgba(94, 12, 245, 1)), color-stop(100%, rgba(112, 210, 245, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%); 
 
    background: linear-gradient(to bottom, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2323a3', endColorstr='#70d2f5', GradientType=0); 
 
    height: 40vw; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: green; 
 
}
<div class="mast_head"> 
 
    <p style="font-family: 'Roboto', sans-serif;font-size:5vw;color:white;line-height:0;position: relative; 
 
    top: 50%;"> 
 
    Text 1 
 
    </p> 
 
    <p style="font-family: 'Work Sans', sans-serif;font-size:2vw;color:rgba(255,255,255,.5);line-height:0;position: relative; 
 
    top: 50%;"> 
 
    Text 2 
 
    </p> 
 
    <div style="top:-50;font-family: 'Biryani', sans-serif;color:white;"> 
 
    <div style="display:inline-block;"> 
 
     Bla1 
 
    </div> 
 
    <div style="display:inline-block;"> 
 
     Bla2 
 
    </div> 
 
    <div style="display:inline-block;"> 
 
     Bla3 
 
    </div> 
 
    </div> 
 
</div>

+0

http://codepen.io/anon/pen/yOEBLr Nope – Patrick

+0

@Portal_Zii次に、グラデーションの上の緑色のセクションについて説明しますか? – Aaron

+0

LOL soz私はそれがnavであると仮定しました。私は白い笑を探していた。レームはよりよく見える。 – Patrick

答えて

0

EDIT ---

<p style="font-family: 'Roboto', sans-serif;font-size:5vw;color:white;line height:0;position: relative; top: 50%; display:inline-block;"> 

そのあなたのインラインフォントサイズ。 Pタグをインラインブロックにします。または、代わりにemまたはptを使用します。

+0

これは、ギャップをボトムに移動します。 – stackoverfloweth

+0

編集済みの回答 - それがうまくいくかどうかわかります – Patrick

+0

Pタグをインラインブロックにすることも、ptやemやpxのような別の属性を使うこともできます。 – Patrick

関連する問題