Question

我有一个视差图像设置在div上面，文本带有灰色背景，但是白色＆＃34;边缘＆＃34;两个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>

Answer 1

从margin-top标记中删除h2，即创建空白的内容。像：

h2 {
  margin-top: 0;
}

请看下面的代码段：

＆＃13;

h2 {
  margin-top: 0;
}

body {
  margin: 0;
}

＆＃13;

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

＆＃13;

希望这有帮助！

Answer 2

试试这个：

h2 {
    margin: 0;
}

Answer 3

其他答案是正确的，h2边距是推动div下降的原因，但是你可能希望保留h2上的边距（为什么会让你的布局痉挛？）。您还可以向1px或更大的npa div添加填充。并保留h2元素的边距。

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

Answer 4

您还可以使用

重置CSS

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 {
	margin: 0;
	padding: 0;
	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>

无法消除两个div之间的白色边距

4 个答案: