[CSS] Collapsing Margins

Refactor the spacing between <header>, <article>, and <aside> so that elements will have a 20px margin above and below, regardless of their order on the page. Account for collapsing margins and use shorthand syntax.

header, article, aside {
  margin: 20px 0;
}

 

Add a 20px bottom margin to <header>, <article>, and <aside> using the shorthand syntax. Remove any top margins and keep in mind that with top and bottom padding, the margins will no longer collapse.

header, article, aside {
  padding: 10px;
}
article {
  margin: 20px 0;
}

---> Change to----->

header, article, aside {
  padding: 10px;
  margin: 0 0 20px 0;
}

 

转载于:https://www.cnblogs.com/Answer1215/p/3903886.html