Between two block elements top and bottom, WHAT determines the size of the line break? How does a browser decide how much space to place there?
As far as I’m aware, each browser has its own set of default values which are applied, if no CSS rules have been given for the element in question. Hence you may see slight variations between browsers where the defaults have been used.
Makes sense. Thanx!
1 Like
It also depends on what the elements are. I would expect there to be a gap between 2 paragraphs but not between 2 divs (unless a margin was set in the CSS).
3 Likes
The question is largely the answer. How things are rendered is up to the user agent (browser) and each browser may have its own rules. I think (would hope) that most browsers closely follow the W3C Recommendations, and that they have sane defaults where there is leeway in the interpretation of the Recommendations. This should be for both the HTML according to the doctype and CSS according to the level.
https://www.w3.org/TR/html401/struct/text.html#h-9.3.5
How paragraphs are rendered visually depends on the user agent.
…
Style sheets provide rich control over the size and style of a font, the margins, space before and after a paragraph, the first line indent, justification and many other details.
And there is precedence to consider. For example, say a browsers default font size is 16px. the page author feels that is a bit too large and has CSS to make it 12px, and I have my browser font size set to 20px. The rendered font size will be 20px. (if it wasn’t I would consider using a different browser)
2 Likes
Line breaks do not occur between block elements unless you explicitly insert a <br> tag, which you shouldn’t.
Space between block elements is determined by margins. As @Gandalf has pointed out, browsers will provide a default margin on <p> tags but not on divs.
When you are using a <br> tag properly, the space it creates is determined by the line-height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
div, p {
background:#eef;
line-height:1.2;
}
</style>
</head>
<body>
<p>P Tag - Lorem ipsum dolor sit amet consectetuer facilisis Morbi hendrerit sociis sed. Parturient pretium orci.</p>
<p>P Tag - Suspendisse quis nunc dui elit eu urna mollis vestibulum nibh ut. Sem In vitae odio Nunc.</p>
<div>Div Tag - Lorem ipsum dolor sit amet consectetuer facilisis Morbi hendrerit sociis sed. Parturient pretium orci.</div>
<div>Div Tag - Suspendisse quis nunc dui elit eu urna mollis vestibulum nibh ut. Sem In vitae odio Nunc.</div>
<p> O’er all the hilltops<br>
Is quiet now,<br>
In all the treetops<br>
Hearest thou<br>
Hardly a breath;<br>
The birds are asleep in the trees:<br>
Wait, soon like these<br>
Thou too shalt rest.
</p>
</body>
</html>
5 Likes
Yes, it looks like a mix up of terminology, as line breaks are not something that (should) apply to block elements.
Line breaks apply to flow content such as text, in-line elements and inline-block elements. There a break may occur naturally, such as when a sentence of text runs out of width in its parent container and wraps to a new line, or a break may be forced with a <br> tag, which is an often abused element, as it has few valid use cases. So the size of line breaks in regard to in-line and flow content is defined by the line-height property.
However block elements are entirely different. Their default behaviour is to stack beneath any previous sibling element, a bit like a new line, but not lines as such, as blocks are not in-line and not affected by line-height.
As mentioned the “gap” between block elements is defined by margins and different block elements may have different default margins.
Padding may also create a perceived gap where the element has no visible bounds. The difference between margins and padding is that margins are a gap external to the element, while padding is an internal gap keeping the content from the sides. See the “Box Model”
5 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.