Adding top/bottom margins

HTML-CSS
#1

My page

I lost track of which margin was doing what so I reset all my top/bottom margins. What is the best method to cleanly add consistent margins throughoutyour work? Is it best to target a certain element in order to use the least css i.e

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

Is it best to target #2 and add top/bottom margin instead of adding bottom margin to #one & #two.

I’m sure I have had loads of overlapping margins in my CSS which probably equate to more than the margin i wanted.

Thanks

#2

Just to be clear, the top/bottom margins will “collapse” when you have a structure like this. In other words, if those <div>s have a top margin of 20px and a bottom margin of 20px, the margin between them will only be 20px, not 40px. If you already knew this then I apologize for the obvious explanation, I just wasn’t sure from what you wrote.

As far as how to put margins between them, I often use the adjacent sibling combinator ( + ). Don’t put any top/bottom margins on the individual <div>s but instead put a top margin on just the <div>s that are preceded by a <div>:

div + div {
  margin-top: 20px;
}
#3

I wasn’t sure if margins collapsed so thanks for clearing it up!

Will give the adjacent sibling combinator a play.

Thanks sir!