NO BUG: <p> tags in accordion render differently (bottom margin)

Bugs
1

Browser: Firefox 117
OS: Windows 11

When a p tag follows an unordered list element within the non-nestable accordion element, it does not get any bottom margin. However, when a p tag is followed by an unordered list, it gets a 18px bottom margin.

Builder text input (rich text component)

Paragraph 1
<ul>
 	<li>Text 1</li>
 	<li>Text 2</li>
 	<li>Text 3</li>
</ul>
Paragraph 2
<ul>
 	<li>Text 4</li>
 	<li>Text 5</li>
 	<li>Text 6</li>
</ul>

HTML rendering in browser

<div class="accordion-content-wrapper" style="display: block;">
<p>Paragraph 1/p>
<ul>
 	<li>Text 1</li>
 	<li>Text 2</li>
 	<li>Text 3</li>
</ul>
<p>Paragraph 2</p>
<ul>
 	<li>Text 4</li>
 	<li>Text 5</li>
 	<li>Text 6</li>
</ul>
</div>

Output browser
render

I think this is a bug.

2

Hi,
Thanks so much for your report!

The <p> tag has a margin-bottom by default to create a space between the following paragraph/element. At the last <p>, this margin is removed because you don’t want it there in 99% of the cases.

The “problem” will probably occur in some other places, but changes to it would probably lead to more problems, or optical deviations, for a lot of users.

You can solve your problem easily by telling the element that all <p> tags should get a margin-bottom. Add this to the accordion » custom CSS or if you want this globally, add it to Bricks » Setting » Custom CSS without %root%:

%root% .accordion-content-wrapper p {
  margin-bottom: 1.2em;
}

Best regards,
timmse

3

Thank you for your quick reply. I will solve it the way you proposed.