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

Bei Zhang
PRO
Bei Zhang
Pro Student 7,113 Points

i checked the vertical elements, there is no larger part can collapse. could you kindly help me to check?

/* ================================= Base Element Styles ==================================== */

body { line-height: 1.6; color: #3a3a3a; }

a { color: #fff; text-decoration: none; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Layout Containers ---- */

.main-header { background: #3acec2; padding:2em 0; }

.wrapper{ width:70%; margin:0 auto; }

.main-footer { padding: 2em 0; background: #d9e4ea; }

/* ---- Page Elements ---- */

/* ================================= navigation Styles ==================================== */ .name{ margin:0; }

Amrit Pandey
Amrit Pandey
17,595 Points

cannot actually understand your problem. If you want to see margin collapse, put a red border around every element by

*{
  border: 2px solid red;
}

You'll see that some of the elements will flow out of the divs

Bei Zhang
Bei Zhang
Pro Student 7,113 Points

i have got it right. the default <body>element has a margin that keep space in the browser. thx for your attention

1 Answer

Steven Parker
Steven Parker
204,000 Points

Document body styling usually has margins by default.

That usually results in a better appearance, but if you need to remove them you can do so in your CSS:

body { margin: 0; }
Amrit Pandey
Amrit Pandey
17,595 Points

that is good to include but professional approach involves including a normalize.css file which removes all in-browser consistency.

Steven Parker
Steven Parker
204,000 Points

A normalizing file would probably not remove body margins, but it might set them to a consistent value. You'd still want to remove them in your custom CSS.