浏览器（重点关注Safari）处理div内/周边br元素的规则咨询

Great question—this stuff can feel confusing at first, but it all boils down to core HTML layout rules that Safari (and all modern browsers) follow closely. Let’s break down each of your test cases to make sense of what’s happening:

Test Case 1: <div><br></div><br> → 2 visible line breaks #

• The <div> is a block-level element, which by default starts on a new line and fills the available width. Inside it, the <br> creates a forced line break, making the div render as an empty line on the page.
• The trailing <br> outside the div is an inline element that adds another forced line break right after the div’s block. Combine those two, and you get two distinct line breaks.

Test Case 2: <br><div><br></div> → 1 visible line break #

• Block-level elements like <div> automatically trigger a line break before they render. When a <br> (an inline element) sits immediately before a block element, browsers merge the <br>’s intended line break with the div’s default pre-block line break. The result? The first <br> doesn’t add any extra space—it’s effectively ignored in the layout.
• Only the <br> inside the div contributes to a visible line break, so you end up with just one total.

Test Case 3: <div><br>sasd</div> → Extra line break before text #

• Here, the <br> comes right before your text content inside the div. Since <br> forces a line break, it pushes the "sasd" text down to a new line within the div, leaving an empty line above it. That’s why you see an extra line break compared to a div with just the text.

Test Case 4: <div>sasd<br></div> → No extra line break #

• When a <br> is the last child of a block-level element with no content after it, browsers don’t render an extra line break from it. The div itself ends with a block-level line break, and the trailing <br> has no subsequent content to push down—so it doesn’t add any visible space.

All of this aligns with the official HTML specification, which defines how block-level and inline elements interact, and how whitespace/line breaks are collapsed or rendered. Safari doesn’t have any special quirks here—it’s following the same rules as other major browsers for these scenarios.

内容的提问来源于stack exchange，提问作者Krizai