Typography question

Elements Typography
1

Hi all. Is there an elegant way to add 3px of space after each paragraph in this document?

https://joezeff.design/responsive

This is the inner HTML copied and pasted from the text box:

<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&nbsp;<br><span style="color: rgb(0, 0, 0); font-family: proxima-nova, sans-serif; font-variant-caps: normal; letter-spacing: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><i style="font-size: 14px;">This is a footnote.</i><br></span>

Thanks in advance. So appreciative of those who jump in to answer questions :slight_smile:

2

one way is to wrap each paragraph in a div or section, and then add some padding to that area.

<div id="para1" style="margin-bottom:3px">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget nulla a nibh dapibus rutrum. Maecenas ac diam non nisi ullamcorper scelerisque sed vitae lacus. Suspendisse cursus, ante at congue sagittis, nunc urna dignissim nisi, commodo varius nibh elit id mauris. Sed arcu metus, consectetur nec justo non, finibus efficitur nunc. Donec egestas tortor ut ante tincidunt iaculis. Proin condimentum ex in elit fringilla, quis gravida felis scelerisque. Praesent ornare ullamcorper enim, vel pellentesque magna sodales at. Ut quis ex massa. Fusce ac ligula ipsum. Ut sit amet odio vitae erat condimentum consequat. Morbi euismod ipsum a enim eleifend, consectetur maximus sem fringilla.

<div id="para2" style="margin-bottom:3px">

Aliquam cursus varius mi, commodo euismod neque lobortis nec. Morbi sit amet vestibulum turpis, at porttitor diam. Quisque nulla ex, pulvinar sit amet sodales vitae, interdum a mauris. Nam suscipit, velit convallis pulvinar mollis, nibh elit dictum nibh, eu pulvinar elit eros nec ante. In et felis eu eros eleifend semper sed vitae tortor. Ut volutpat venenatis tempus. Nam lacinia ultrices arcu quis ultricies. Nunc leo eros, sagittis quis convallis at, varius non sem. Fusce lobortis nisl non dui mattis cursus.

1 Like
3
2 Likes
4

Thank you. I was able to do this, which seems to work :slight_smile:

Screen Shot 2020-07-30 at 7.55.28 PM
Screen Shot 2020-07-30 at 7.55.28 PM1576×1266 307 KB

1 Like
5

Probably the best solution to add p or div tags. If anybody wants to use the br hack…

<style>
	.br10 br {
		display: block;
		margin: 10px 0;
		content: " ";
		line-height:10px;
	}
</style>

in head HTML and add the class br10 to your rectangle.

2 Likes