Proper use of DIV tags for text alignment and design

Many of you probably use the <div> tag to align text or to shift certain content elements to the right or left. There are also specific <div> attributes for the correct display of text in right-to-left languages . The most commonly used <div> elements with attributes for shifting elements to the right or left side have the following syntax:

<div class="pull-left"></div>
and
<div class="pull-right"></div>

The <div> tag for languages with right-to-left text direction looks like this:

<div class="text-rtl"></div>

The <div> tag for aligning text to both the left and right edges (justification) looks like this:

<div class="text-justify"></div>

I'm not used to working in a visual editor and prefer to manually specify HTML tags. This way, I have more control over the visual formatting of my publication . When I enter text in paragraphs , each block of text is automatically wrapped in a <p> tag, which is also visible in the preview mode . However, I've noticed that as soon as I use one of the auxiliary tags and place it at the beginning or end of a paragraph, the automatic wrapping in the <p> tag does not occur. Why? Hmm.., it's hard to say . I've been observing this behavior for a long time and most likely , it's a minor flaw in the code. It's not something that completely ruins the article's formatting, but in these cases the spacing between paragraphs disappears.

The solution to this small issue is very simple manually add the <p> tags at the beginning and end of the paragraph:

https://cdn.steemitimages.com/DQmYSg7NMNiV7sDHtP7bCdg1Gw853hR47gM5YW2kA1oPJQu/image.png
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

• Illustration on screenshots is AI-generated on piclumen.com