The decision to make for using margin-top or margin-bottom-CodePudding

There are 2 ways to display the same distance between elements.

<div>
  <h1 style={{marginBottom: "8px"}}>Header 1</h1>
  <h1>Header 2</h1>
</div>

<div>
  <h1>Header 1</h1>
  <h1 style={{marginTop: "8px"}}>Header 2</h1>
</div>

Both of them display the same result in UI.

I am thinking of a third way

<div>
  <h1>Header 1</h1>
  <div style={{marginTop: "8px"}} />
  <h1>Header 2</h1>
</div>

This way you don't need to worry about which element controls the margin.

However I seldom see people suggest this way for margin, is it because there're some disadvantages for that?

CodePudding user response：

Adding the div in the middle seems a little unnecessary. In the end, it doesn't really matter where will you put the margin, it's your pereference. Personally I like structuring the page from top to bottom , which in this case would suggest putting the margin to the bottom of the first header. Of course, it really depends on the matter and the structure you have.

CodePudding user response：

Doubt it matters in the grand scheme of things. It comes down to preference. The third approach could probably have a slight performance impact but it's negligible. That said, it's probably unnecessarily messy.

But the main thing you're probably gonna watch out for is ensuring your margins are consistent. I'd probably make a class / use something like Tailwind to make sure whatever margins I use are easily reusable.