Answers from Tommy and Paul made a lot of sense. So the point I take from them is that <br> has semantic value, to actually break the line and shift to the next available position vertically by 1em. And it carries a "meaning" that the content has a line break or empty line such as in a postal address, or in a poem, such as 3 line breaks to indicate hesitation between writing.
And it is also confirmed that <div> will just make sure it is already on a new line. If it already is, it won't break it again, like the case
will make sure the block element has vertical break, but
in this case the <div> will not generate an extra break, because it is already on a new vertical position.
the idea that <div> and <span> are semantically neutral is quite important in HTML and CSS, that <p> is like <div> except it means a paragraph in a document, and <strong> is like a <span> except it means emphasized content.
So if we make <p> not to have line breaks above and below, or <br> not to break the line, then it is against the semantics of the element, as a common paragraph usage is supposed to have line breaks before and after.
However, would it be true that <div> and <span> still have one semantic meaning, and that's <div> is supposed mean vertically stacked items, and <span> is to mean flowing inline kind of element. The idea of "flowing element vs new section element" does carry one meaning.
By the way, it is by asking questions like these a few months ago that I found out about collapsing margins, the box model difference in quirks mode between IE and Firefox, and why many experienced developers get confused by vertical-align:middle and thought it doesn't work. And there are people who will step in and tell you it is meaningless to ask these questions.