Search code examples
htmlcsstwitter-bootstrap

An empty <p> tag is automatically getting inserted, how do I get rid of it?

An empty <p></p> tag is getting inserted automatically when the page is rendered, I'm not sure, how to get rid of it. Which is adding unwanted space on the webpage.

Screenshot the Chrome Developer Tools with the <p> tag in question being highlighted

I'm not sure how I can get rid of it. I'm trying to set the margin-bottom for the <p> to 0px, even that isn't getting applied as well.

I would be really thankful to anyone who could help me with fixing this issue.

Thanks in advance!

Here is the code which renders the HTML block: The <p></p> tag gets generated dynamically, but not sure, how it is getting generated from the code.

{% if job_detail.type != '' and job_detail.type is not None or job_detail.age_limit != '' and job_detail.age_limit is not None %}
     <hr />
     <div class="row">
     {% if job_detail.type != '' and job_detail.type is not None %}
       <div class="col-md-6">
         <h3 class="card-title topic-title">JOB TYPE</h3>
         <p class="card-text topic-text last-child">{{ job_detail.type|linebreaks }}</p>
       </div>
     {% endif %}
     {% if job_detail.age_limit != '' and job_detail.age_limit is not None %}
       <div class="col-md-6 mt-4 mt-sm-4 mt-md-0">
         <h3 class="card-title topic-title">AGE LIMIT</h3>
         <p class="card-text topic-text last-child">{{ job_detail.age_limit|linebreaks }}</p>
       </div>
     {% endif %}
     </div>
   {% endif %}
Solution

  • I was able to fix this issue by adding the following style to the paragraph tag ```margin-bottom: 0!important

    Thanks everyone for your time and assistance!