Rendering markdown into flask template with existing css

[leehbi]

I'm using markdown with flask to render markdown into a card via a flask template. This is working fine i.e the markdown is being translated into HTML on the page. The issue I have is when using this with existing CSS we find the styles are preventing some of the the HTML tags from taking effect.

i.e. in the head of the page I have a CSS link (Tailwind css) that sets P with 0 margin and inherits over styles for Headings/Text Size.

When markdown produces the P with my content the margin is 0 from the parent style.

I've tried to apply tag specific styles to no avail as the p is rendering above my content.

              <ul class="list-group list-group-flush">
                       <li class="list-group-item">
                        {% for re in res %}
                        <p style="margin-bottom: 1em;">{{ re['Method'] | safe }}</p>
                        {% endfor %}
                      </li>

              </ul>

I'm unsure if this is a markdown issue or rather an CSS related issue we see when rendering the markdown into an existing page

I could be using markdown incorrectly too.

[leehbi]

I sorted it by added this to the end of the css on the page. >* was new to me but apart from that I had pick through dev tools to extract the css that worked for me - that is requirement specific though.

markdown > * {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 1em;
    font-size: .875rem;
    line-height: 1.25rem;
}

I then wrapped the template code with a div as below

<div class="markdown">
                            {% for re in res %}
                            {{ re['Method'] | safe }}
                            {% endfor %}
  </div>

[waylan]

Sounds like CSS Specificity struck again. Glad you worked it out.