CSS CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

Amandeep Pasricha
Amandeep Pasricha
14,931 Points

So do some block elements come predefined with certain margins and paddings already applied to them?

Exactly as my question is asked.

We had to change the margin of h1 even though we didn't do anything to it in the first place, so it seems like some block-level elements come predefined with margins and paddings, while some don't.

Am I correct?

2 Answers

Steven Parker
Steven Parker
204,006 Points

You asked a very similar question two days ago. And I said:

Some elements have padding or margins by default, but most do not.

Here's a CSS Default Values Reference on w3schools.com that shows the values different elements have by default.

Amandeep Pasricha
Amandeep Pasricha
14,931 Points

Steven Parker On a previous question, you stated that " Note that the <body> is one of the few elements that has margins by default, so the width of block elements inside it will be a bit less than that of the root (or browser window). You can, of course, remove the default margins with CSS"

Wouldn't the white space surrounding the block level elements in <body> be due to padding, as opposed to margin? While I do clearly see margin applied to <body> in the site you provided, wouldn't the margin be relative to the <HTML> block as opposed to the blocks contained within it?

Steven Parker
Steven Parker
204,006 Points

There's no default padding. The white space is the margin between the body and the html element. Elements that cover 100% of the body still don't reach the edges of the window because of that margin.

Note that there would be no visible difference between margin on the body element (the default) and padding applied to the html element (not normally done).

Amandeep Pasricha
Amandeep Pasricha
14,931 Points

Steven Parker Thank you! I meant padding applied to <body> by the way, not to <HTML>. But what was wrong in my understanding is that I thought there was literally nothing between the <body> and the <HTML> block. This one small detail you pointed out illuminated the entire system.