I'm getting an annoying tiny grey line at the end of the text in the P Tag in my website

Question

<div class="column">
          <!-- <div class="box"> -->
          <div class="media">
            <div class="media-left">
              <figure class="image is-128x128">
                <img src="img/group-513793.png" alt="Enter PIN icon">
              </figure>
            </div>
            <div class="media-content">
              <p class="title is-4">Enter PIN</p>
            </div>
          </div>
          <!-- </div> -->
        </div>

This is the problem which I'm facing.

I'm using Bulma CSS for styling. I don't see any issues in desktop view or in mobile view when opening the website in my laptop. I'm getting that grey line only when I'm opening the site in a mobile.

Please help me get rid of that grey line after the text.

Answer 1

To remove the tiny grey line at the end of the text in the

tag, you can override the default bottom margin applied to the

element.

<style>
  p{
    margin-bottom: 0;   /* CSS Reset */
   }
</style>

By setting the margin-bottom:0 it will effectively remove the bottom margin from the

element, eliminating the grey line.