How to not superimpose too margin of too div?

Question

I want to disconnect the margin of my too div, because the margin bottom of the first div superimpose with the margin top of the second div:

HTML:

<div>This element has a margin of 70px.</div>
<div>This element has a margin of 70px.</div>

css:

div {
  margin: 70px;
  border: 1px solid #4CAF50;
}

use like : margin: 0px 70px 70px 70px; – Md. Delowar Hossen Oct 05 '22 at 07:55 — Md. Delowar Hossen, Oct 05 '22 at 07:55
I want 70px margin top for the first div too – nyaina Oct 05 '22 at 07:58 — nyaina, Oct 05 '22 at 07:58
margin: 70px 70px 0px 70px; – Md. Delowar Hossen Oct 05 '22 at 08:00 — Md. Delowar Hossen, Oct 05 '22 at 08:00

score 1 · Answer 1 · answered Oct 05 '22 at 07:56

1

Just add margin-top only for the first div

div {
  margin: 0px 70px 70px;
  border: 1px solid #4CAF50;
}

div:first-child{
  margin-top:70px;
}

<div>This element has a margin of 70px.</div>
<div>This element has a margin of 70px.</div>

answered Oct 05 '22 at 07:56

rrr63

score 1 · Accepted Answer · answered Oct 05 '22 at 08:23

Wrap all the elements in a container. Then instead of using margin on every single element you can use padding and gap. note, that gap is useable for flexbox and grid.

:root {
  --margin: 70px;
}

.container {
  display: flex;
  flex-direction: column;
  padding: var(--margin);
  gap: var(--margin);
}

<div class="container">
  <div>This element has a margin of 70px.</div>
  <div>This element has a margin of 70px.</div>
</div>

Alternatively, you can also use the :first-of-type selector:

div {
  margin: 0 70px 70px;
}

div:first-of-type {
  margin-top: 70px;
}

<div>This element has a margin of 70px.</div>
<div>This element has a margin of 70px.</div>

2 Answers2