Is there a problem with my code editor, or with my inheritance code? [closed]-CodePudding

Within my navigation bar, I added a p element. As I set the nav font size to 18px, all the anchor elements and the p element became 22px. I expected this for the p element because earlier I set all p elements to 22px, but why did it affect the anchor links within the navigation bar? I inspected this with DevTools and for some reason, when I added the p element, every anchor element within the nav element became nested within a p element, even though I never coded that. Here is my HTML code:

p {
  font-size: 22px;
  line-height: 1.5;
}

nav {
  font-size: 18px;
}

<nav>
  <p>This is the navigation<p>
  <a href="blog.html">Blog</a>
  <a href="#">Challenges</a>
  <a href="#">Flexbox</a>
  <a href="#">CSS Grid</a>
</nav>

Here is what DevTools shows:

<nav>
  <p>This is the navigation<p>
  <p>
    <a href="blog.html">Blog</a>
    <a href="#">Challenges</a>
    <a href="#">Flexbox</a>
    <a href="#">CSS Grid</a>
  <p>
</nav>

CodePudding user response：

You need to close <p> with </p>. Since you didn't all its siblings are treated as children.

p {
  font-size: 22px;
  line-height: 1.5;
}

nav {
  font-size: 18px;
}

<nav>
  <p>This is the navigation</p>
  <a href="blog.html">Blog</a>
  <a href="#">Challenges</a>
  <a href="#">Flexbox</a>
  <a href="#">CSS Grid</a>
</nav>

CodePudding user response：

This is quite funny. It sometime happens and you become frustrated. The <p> element is not a self closing element so you need to include a </p> to close the element.

p {
  font-size: 22px;
  line-height: 1.5;
}

nav {
  font-size: 18px;
}

<nav>
  <p>This is the navigation</p>
  <a href="blog.html">Blog</a>
  <a href="#">Challenges</a>
  <a href="#">Flexbox</a>
  <a href="#">CSS Grid</a>
</nav>

This is gonna be the result for your code.