问题
The question and answers have custom defined div wrappers around them. The closing div is on next line producing a blank line. I want to remove that line. Post Link http://fgstudy.com/uncategorized/a/
I already tried the white-space CSS code CSS Code:
div#q1, div#a1, div#a2 { white-space: normal; }
P { white-space: normal;}
HTML CODE:
<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 CODE:
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;}
I want the white space after text disappears. Can anyone helps me?
回答1:
You can remove the margin from p tag to remove the blank space below the text
p {
margin-bottom: 0px;
}
回答2:
It looks like the paragraph inside each div has a margin-bottom property set.
Something like .entry-content p { margin-bottom: 0; }will get rid of it, or to be more specific: .entry-content > div p { margin-bottom: 0; }
来源：https://stackoverflow.com/questions/57055317/remove-white-space-using-css