Bottom Margin Control

[trudog]

First, thank you for this plugin!

I notice that the q-markdown tag wraps it's content with a <p> tag that has a default margin of 0px 0px 16px from quasar.sass. The problem is that I would like to control the bottom margin, but it's not clear how to do that.

I added a same text wrapped in just a p tag and I'm able to override the quasar margin.

Sorry if this is a basic question, but I've tried everything I could think of and would like to know if this behavior is plugin related, or if there is something I can do to programmatically to override the behavior.

Below are screenshots illustrating what I'm talking about. Here's a link to a simplified CodePen demo of the behavior.

Thank you for your time!

HTML Source

        <q-markdown :src = 'description' />

        <p>{{ description }}</p>

Style definitions

<style lang="sass" scoped>
  p
    background-color: $green-3
    margin: 0px
  .q-markdown
    background-color: $blue-3
    margin: 0px
    p
      background-color: $red-5
      margin: 0px
</style>

HTML Rendered

<div data-v-5b28318c="" 
     class="q-item__label q-mx-sm q-mb-sm q-mt-xs q-pr-sm q-item__label--caption text-caption" 
     style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 100;">
   <div data-v-5b28318c="" 
     class="q-markdown">
      <p>
         The q-markdown plugin appears to wrap the content in a paragraph tag, but it’s not clear how to control the bottom margin
      </p>
   </div>
   <p data-v-5b28318c="">
      The q-markdown plugin appears to wrap the content in a paragraph tag, but it's not clear how to control the bottom margin
   </p>
</div>

[hawkeye64]

It's because your css is scoped which only applies to your SFC. Look into :v-deep or :deep on how to make the CSS modify cascaded directives.

[trudog]

That did it! Thanks for the quick reply and references Jeff.

[Mahrkeenerh]

Thank you!