How to give space between paragraph elements with display:contents ("unusual element")?-CodePudding

I'm given paragraphs such as these below.

<p >Eren Marie, passed away on Friday, April 23, 2019.</p>
<p >She was born on March 23, 1987 to Jeffrey and Susan. Erin is survived by her loving husband, Peter Stevens, and daughter, Rose Irene; father Jeffrey and mother Susan; brother Seanand sisters Lauren</p>

To force my site to display the paragraphs, my CSS is this.

.sr-only {
    display: contents;
}

But the repercussion is that all the paragraphs have no spacing in between them. They just look like one long paragraph.

I tried margin-bottom, padding-bottom and nothing works. I can't remove the sr-only class cos it's in thousands of profiles as of now.

How do I create the space in between?

CodePudding user response：

You can use CSS to add a pseudo-element in between each paragraph. If you then set the display of this to block you can add whatever padding you wish.

.sr-only::after {
  content: " ";
  display: block;
  margin-bottom: 1rem;
}

CodePudding user response：

You can try this approach.

$( "<br><br>" ).insertAfter( ".sr-only" );

.sr-only {
    display:contents;
    
}

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<p >Eren Marie, passed away on Friday, April 23, 2019.</p>
<p >She was born on March 23, 1987 to Jeffrey and Susan Staton. Erin is survived by her loving husband, Peter Stevens, and daughter, Rose Irene Stevens; father Jeffrey Staton and mother Susan Staton; brother Sean Staton and sisters Lauren Staton</p>