2017-11-01 8 views
0

divの背景に灰色の背景を持つ視差画像を設定していますが、2つのdivの間に白い「マージン」はありません。2つのdivの間に白いマージンがないようにします

<div class="parallax"></div> 
<!-- KID START -->  

<div class="npa" style="height: 300px; background-color: #cccccc; margin-top: 0;"> 

    <h2 style="font-family: 'Passion One', cursive;">Confused Code Cat</h2> 
    <p style="font-family: 'Passion One', cursive;">Confused Code Cat is Confused. Please Help.</p> 

</div> 

答えて

1

空白を作成するものであるh2タグからmargin-topを削除します。以下のような:

h2 { 
 
    margin-top: 0; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}
<div class="parallax"></div> 
 
<!-- KID START -->  
 

 
<div class="npa" style="height: 300px; background-color: #cccccc; margin-top: 0;"> 
 

 
    <h2 style="font-family: 'Passion One', cursive;">Confused Code Cat</h2> 
 
    <p style="font-family: 'Passion One', cursive;">Confused Code Cat is Confused. Please Help.</p> 
 

 
</div>

・ホープ、このことができます:

h2 { 
    margin-top: 0; 
} 

は、以下のスニペットを見てください!

+0

オーケーをCSSをリセットすることができ、Saurav Rastogiはそれを修正しました。ありがとう、相棒! – ConfusedCodeCat

+0

@ConfusedCodeCatこれは私の喜びです。これがあなたを助けてくれたら、この回答をupvoteして受け入れてください。 –

0

これを試してみてください。

h2 { 
    margin: 0; 
} 
+0

これは質問に対する答えを提供しません。批評をしたり、著者の説明を求めるには、投稿の下にコメントを残してください。 - [レビューから](/レビュー/低品質の投稿/ 17799961) – ykaragol

+0

すべてがクリアです! – Ehsan

0

他の回答が正しい、h2マージンがdiv要素を押し下げているものですが、h2にそのマージンを維持することが望ましいかもしれない(なぜあなたのレイアウトをけいれん?)。 1px以上のnpa divにパディングを追加することもできます。 h2要素の余白を維持します。

<div class="npa" style="height: 300px; background-color: #cccccc; padding: 1px;"> 
0

ます。また、使用して

html, body, div, span, applet, object, iframe, 
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 
a, abbr, acronym, address, big, cite, code, 
 
del, dfn, em, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
b, u, i, center, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td, 
 
article, aside, canvas, details, embed, 
 
figure, figcaption, footer, header, hgroup, 
 
menu, nav, output, ruby, section, summary, 
 
time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
}
<div class="parallax"></div> 
 
<!-- KID START --> 
 

 
<div class="npa" style="height: 300px; background-color: #cccccc; margin-top: 0;"> 
 

 
    <h2 style="font-family: 'Passion One', cursive;">Confused Code Cat</h2> 
 
    <p style="font-family: 'Passion One', cursive;">Confused Code Cat is Confused. Please Help.</p> 
 

 
</div>

関連する問題