why is there no empty line between <p> and <a> when there is one <br> in between them

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<a href="google.com">google</a>
<br />
<a href="google.com">google</a>
<br />
<p>This is first paragraph.</p>
<br />
<p>This is another paragraph.</p>

<!-- end snippet -->

The above code produces the same output even if you remove the <br> tag between the <p> and the <a> tag. <br> tag breaks the line and <p> being a block level element should start in a new line, i.e. it should again breaks the line before itself. So shouldn't there be an empty line in between the <p> and the <a> tag in the output. But in the output, there's no empty line between them. Also when subsequently adding more <br> tags between <a> and <p>, it does create more empty lines. But just one <br> tag makes no difference, why ?

I tried adding a <br> tag in between an <a> tag and a <p> tag hoping that this would create an empty line in between the <a> and the <p> tag. But it didn't happen so with just one <br> tag and it produces the same output even if there were no <br> tag. Why is it so ?

This is because a <p> element is a block-level element, which means it takes up the full width of its parent container and creates a new line before and after the element. So, even though there is a line break before the <p> element, the browser will still treat it as being on the same line as the text that precedes it.

You can do your <a> element displayed like block with display: block to got space between them:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

a {
  display: block;
}

<!-- language: lang-html -->

<a href="google.com">google</a>
<br />
<a href="google.com">google</a>
<br />
<p>This is first paragraph.</p>
<br />
<p>This is another paragraph.</p>

<!-- end snippet -->

Also, you can use margins, to create space without <br /> elements:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

a {
  display: block;
  margin-bottom:16px;
}

<!-- language: lang-html -->

<a href="google.com">google</a>
<a href="google.com">google</a>
<p>This is first paragraph.</p>
<p>This is another paragraph.</p>

<!-- end snippet -->