How to control <p> in Wordpress

Question

I am trying to do something very simple in my post:

Instead of this, I am getting:

That's because when I am doing it at the visual editor, it counts "Title" as a paragraph and the list is outside this paragraph.

I didn't find a way to control the <p> tag at the text editor. Also I tried to press shift + enter after the title but then I can't define the list.

How can I handle this situation? preferable in the most generic way (for other posts to work like this too...)

Thank you.

Answer 1

The WordPress "visual editor" [WYSIWYG] will often inject or modify HTML elements, that's just what it does. One approach would be to try to create the content using the other, HTML editor tab and see if you can get the result you want that way.

Another approach would be to modify the styling of certain elements in the theme's style.css file [the more specific the better so as to not interfere with other styling]. It depends on your theme but you could try something like this:

div#primary main#main article div.entry-content p {
    margin-bottom: 1px;
    margin-top: 1px;
}