DIV with extra CSS class turns off auto-formatting

[FranekW]

Hello,

I’d like to expand Obisidna a little bit so I added two CSS rules for extra options in my notes:

• add left padding, e.g. 10em to a block of text
• add a bottom colourful rule with a word explaining my the text.

Then in Obsidian use two divs with two defined classes:

<div class="my-content">
 In descriptive writing, the author does not just tell the reader what was seen, felt, tested, smelled, or heard. Rather, the author describes something from their own experience and, through careful choice of words and phrasing, makes it seem real. Descriptive writing is vivid, colorful, and detailed.
</div>
<div class="bottom-bar>Comment</div>

It’s working OK as what the image below showing:

The problem is I kind of lose auto-formatting of the text inside those divs blovks. As such, Obsidian no longer respond to things like text enclosed by ** ** or _ _, lists are no longer formatted etc.

What do you think I would need to do? Is it even possible?

Thanks

[mnvwvnm]

@FranekW

<div class="my-content">
 In descriptive writing, the author does not just tell the reader what was seen, felt, tested, smelled, or heard. Rather, the author describes something from their own experience and, through careful choice of words and phrasing, makes it seem real. Descriptive writing is vivid, colorful, and detailed.
</div>

Try with span and start the content after “>”:

<span class="my-content">In descriptive writing, the author does not just tell the reader what was seen, felt, tested, smelled, or heard. Rather, the author describes something from their own **experience** and, through careful choice of words and phrasing, makes it seem real. Descriptive writing is vivid, colorful, and detailed.
- list element
- list element
- [ ] a task
	
Second paragraph...
</span>

[FranekW]

I changed from div to span. At first, span had not respected the padding settings until I added display: block; to my-content. Now, it’s working as expected.

Thanks