This is a specific question - in a particular circumstance - about when newlines and CRs are inserted BY the block elements p, div. The behavior described here is the same in Safari and Firefox. (My code starts off with DOCTYPE html as usual.)
First consider this (a one-line html): <p> first</p><p>second</p>
This results in:
blankline
first
blank line
second
and there is a CR after “second”.
Now consider this (one line html): <div>first</div><div>second</div><p>third</p>
This results in:
first
second
blank line
third
So no initial blank line, and no blank line between “first” and “second”. The behavior is different than p.
Now both div and p are supposed to be block elements, According to documentation of W3C and Mozilla, the “entry” <p> or <div> should have a newline and the “exit” </p> and </div> are supposed to give a CR. But this is not what is happening with<div>. Rather, the pair <div></div> only has one CR, so there is no blank line. So it behaves differently than p.
My question: What is going on?
Is this due to decisions “made” by the browser? Or is this a general behavioral, characteristic of <div> - that is, a block element is not always a block element? Am I expecting too much consistency?
There’s lots more where this came from, but I’ll start small.
Paragraphs have top and bottom margin by default, so that they look like paragraphs when you have many. Divs do not as they’re just a box, and a flat one at that if there’s nothing in them.
In your css, put the following rule and you will see the blank space disappears.
p {
margin: 0;
}
You can see what margins and things are set if you open dev tools and use the element selector, then hover on anything. You get a nice graphic representation of the element you have hovered over with the colors clearly showing margin and padding.
Ah ha! Thank you for the insight. I see it in Firefox dev tools.
Where does the default margin come from? Is this browser-specific - a user agent stylesheet? Is it in some html5 specification (so all browsers should do the same thing)?
Must be part of the HTML spec. Just makes sense to have it doesn’t it
Headings have it too. It’s the same across browsers.
Your HTML file is a document as you know and it was invented to present documents over the internet. In the early days all they had was html. No css or anything like that. You just had text so they made it look like print. You told the browser if you wanted a heading or paragraph via h tags or p tags and it automatically formatted it for them. And so it remains
Block level HTML elements, things like divs and headings all stack one on top of the other by default. You can change this behaviour by using the display property in css. You could say display: inline-block And that would make your block level elements line up horizontally rather than stack. You only get a cr in standard block mode.
Now that’s not the same as how float works. Float, works by taking the element out of the normal document flow. When you float an element it doesn’t stack or line up in order. It just moves to the left or whichever you chose. The other elements still know it’s there, they can’t occupy its space (unlike position: absolute which is also out of the document flow but kind of forced into position over whatever’s already there) so they will flow around it. It’s used to get text to flow around an image and things like that. The clear property interrupts that flow behaviour and is used more for positioning I think. To be honest I don’t think I’ve ever used float yet. It’s not something I’ve needed to do yet.
