使用CSS删除空格

Question

问题和答案周围有自定义的div包装器。 结束div在下一行产生空白行。 我要删除该行。 发表链接http://fgstudy.com/uncategorized/a/

我已经尝试了空白CSS代码CSS代码：

div#q1, div#a1, div#a2 { white-space: normal; }
P { white-space: normal;}

HTML代码：

<hr><div id="q1"><p>Which of the following the highest hydration energy</p>
</div><div id="a1"><p>Mg<sup>++</sup></p>
</div><div id="a2"><p>Li<sup>+</sup></p>
</div><div id="a2"><p>Na<sup>+</sup></p>
</div><div id="a2"><p>K<sup>+</sup></p>
</div>
<hr><div id="q1"><p>Which the correct statement</p>
</div><div id="a1"><p>Na<sup>+</sup>is smaller than Na atom</p>
</div><div id="a2"><p>Cl<sup>-</sup>is smaller than Cl atom</p>
</div><div id="a2"><p>Cl<sup>-</sup>(Ion) and Cl (atom) are equal in size</p>
</div><div id="a2"><p>Na<sup>+</sup>is larger than Na atom</p>
</div>

CSS代码：

body {margin: 2% 2%; }
#q1 {margin: 10px 10px; border: 1px; box-shadow: 0px 2px 2px 2px #DCDCDC; text-align: left; padding: 5px 20px; font-size: 18px;  color: #ffffff; background-color: #317eac;}
#a1 {margin: 10px 10px; border: 1px; padding: 10px;  box-shadow: 0px 2px 2px 2px #DCDCDC;  text-align: left;font-size: 16px;  padding: 8px 18px;}
#a2 {margin: 10px 10px;  border: 1px; box-shadow: 0px 2px 2px 2px #DCDCDC;  text-align: left;  padding: 5px 18px;  font-size: 16px;}
#a1:hover{color: #ffffff; background-color: #73AD21;}
#a2:hover{color: #ffffff; background-color: #C71C22;}

文本消失后，我要空白。 谁能帮我？

Answer 1

您可以从p标签删除边距，以删除文本下方的空白

p {
    margin-bottom: 0px;
}

Answer 2

看起来每个div内的段落都有一个margin-bottom属性集。

像.entry-content p { margin-bottom: 0; } .entry-content p { margin-bottom: 0; } ，或者更具体地说： .entry-content > div p { margin-bottom: 0; } .entry-content > div p { margin-bottom: 0; }