Html posts produce too much whitespace between some block elements.

The problem: if you create a post in HTML https://forums.zotero.org produces too much whitespace (the lines are too thick) between several kinds of block elements.

An example between horizontal rules


Heading level 2

Lorem ipsum dolor sit amet consectetuer tellus quis at Vestibulum consectetuer. Urna justo dignissim eget nibh nec faucibus Lorem Aenean elit habitant. Mauris Cum metus vitae fringilla mauris vestibulum habitant Nam Cras tincidunt. Mauris urna wisi eget urna Maecenas ut Quisque lorem condimentum et. Dapibus dui malesuada habitant montes elit tempus ligula In ac pellentesque. Nam magna Curabitur ligula Curabitur feugiat aliquet arcu Curabitur.
Blockquote porta tristique metus ipsum gravida Nam elit wisi Proin elit. Et porta tincidunt nibh Pellentesque fringilla cursus eleifend eu Aenean convallis. Wisi ut eu sagittis Cum dignissim vel commodo at auctor dui. Id Sed justo In Curabitur Nullam Vestibulum ut sed nulla facilisis. Tortor at suscipit justo.
Elit consequat nibh in orci diam eros vitae Vestibulum tempus ullamcorper. Nullam Morbi et Curabitur mauris Vivamus hac eget interdum malesuada congue. Nam pretium congue at nascetur id consectetuer ut justo dui molestie. Condimentum Aliquam ante magna risus ac ligula adipiscing pretium vitae condimentum. In.


h2
{
font-size: 22px;
color: blue;
}



In pellentesque penatibus Nam vitae Nam nisl Vestibulum sit vitae netus. Turpis consequat quam ut eros malesuada augue id vitae nunc egestas. Tellus gravida Vestibulum commodo urna et enim Suspendisse odio at hendrerit. Venenatis et pharetra Curabitur ac quis nunc at condimentum In congue. Felis Phasellus non Curabitur sed id Cum ante nulla habitant consequat. Vestibulum.




Observe that after <h2>, <code>, and <blockquote> there is too much whitespace.

The Solution: looking at the generated HTML in the div with class="CommentBody" we can see the obvious problem. Two sets of br elements are generated between blocks, like this


Lorem ipsum dolor sit amet consectetuer.
&lt;br>&lt;/br>
&lt;br>&lt;/br>
Feugiat vestibulum ut habitasse ...


The solution is to wrap text paragraphs in the p element, remove the br elements completely, and use CSS to style the posts properly.
Sign In or Register to comment.