<a> tag and <p> have different heights and alignments in flex container

Question

I'm building a bottom-nav of sorts for a blog page. In the nav, you have the option to navigate to the last blog entry, the blog home/index, and the next blog post. In the event that you're at the first or last blog post, instead of rendering an <a> I'm rendering a <p> with text indicating that there are no more posts. I chose this approach because apparently it's confusing (accessibility-wise) to render a link that's inactive.

The issue I'm running into is that the text in the anchor elements (or the elements themselves) are a slightly different height than the paragraph element - a 3px difference. I'll attach a picture for reference. It seems undesirable to manually set the height(s) of the elements to make them match. I've tried playing with padding and margins, although the inspector shows no padding or margins. I've also manually set the height on the <p> element to match the height of the <a> elements but it makes the alignment funky. Any ideas why this is? I've tried some creative googling but I'm not getting anything relevant.

Photo of the issue: Note the white space above and below the first two elements (which are anchor elements) and the white space below the last element, which is a paragraph element.

Relevant code: (Please note that the <Link> elements render as <a> elements.)

<footer className='blog-post-footer'>
  <nav>
    <ul>
      <li>
        {previous ? (
          <Link to={`../${previous.frontmatter.slug}`} rel='prev'>
            ← {previous.frontmatter.title}
          </Link>
        ) : (
           <p>You're on the first post.</p>
         )}
       </li>
       <li>
         <Link to='/blog'>
           Blog Home
         </Link>
       </li>
       <li>
         {next ? (
           <Link to={`../${next.frontmatter.slug}`} rel='next'>
             {next.frontmatter.title} →
           </Link>
        ) : (
          <p>No next post...yet.</p>
        )}
      </li>
    </ul>
  </nav>
</footer>

And the CSS:

.blog-post-footer {
  box-sizing: border-box;
  text-align: center;
}

.blog-post-footer ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 0;
}

.blog-post-footer nav p {
  margin: 0;
  padding: 0;
  height: 23px;
}

.blog-post-footer a,
.blog-post-footer nav p {
  color: #65def1;
  background-color: red;
  display: inline-block;
}

And an image of how this is rendered (Firefox):

Answer 1

Please notice that the code above presented is not only conditionally rendering a <p> element inside the the <li> element like this:

<li> <p>First Post!</p> </li>

but is rendering also second nested <li> element containing a <p> element inside the already existing <li> direct child element from your <ul> .

So it is rendering this structure:

<ul> <li> <li> <p>Frist post!</p> </li> <li> </ul>

This might be messing with your styles.

Answer 2

Ok so the issue here was conflicting CSS rules for line height. I set my own line height in my global.css but it was being overridden by my normalize.css. In short, if you're having a similar issue, especially with a text element, make sure to check out your line heights.