CODEWITHSUNDEEP
htmlcss
user15403554
user15403554

Reputation:

Make a margin between all the different divs I have on the page

Hello everyone I am new here on the site, I have a question in html and css.

I try to make between all the divs I have, that there will be a margin of the same size, that is, between each div, there will be a margin, and that there will be the same margin on all sides, even between the div and the edge of the page.

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}
.parent{
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin:5px;
}

.child1{
  flex-basis: 200px;
  background: rgb(39, 61, 134);
  flex:1.5;
  border-radius: 5px;
  margin:5px;
}
.child2{
  flex-basis: 200px;
  background: rgb(172, 57, 53);
  flex:1;
  border-radius: 5px;
  margin:5px;

}
.child3{
  flex-basis: 200px;
  background: rgb(149, 43, 140);
  flex:1;
  border-radius: 5px;
  margin:5px;
}
.child4{
  flex-basis: 200px;
  background: rgb(149, 143, 140);
  flex:1;
  border-radius: 5px;

}
.child5{
  flex-basis: 200px;
  background: rgb(49, 43, 40);
  flex:1;
  border-radius: 5px;
  margin:5px;
}
.fcontainer{
  flex-basis: 200px;
  display:flex;
    flex-direction: row;
    flex:1;
    margin:5px;
}
.fjobcontact{
  flex-basis: 200px;
  display:flex;
    flex-direction: column;
  flex:1;
  margin:5px;
}
<div class="parent">
  <div class="fcontainer">
    <div class="child1"></div>
      <div class="fjobcontact">
        <div class="child2"></div>
        <div class="child3"></div>
      </div>
    </div>
  <div class="child4"></div>
  <div class="child5"></div>
</div>

This is what I have done so far, but I do not understand how to make the margin

Upvotes: 0

Views: 31

Answers (2)

tobig
tobig

Reputation: 19

just add this to CSS:

.child1, .child2, .child3, .child4, .child5{
margin:5px; /*add whatever you want*/
}


*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}
.child1, .child2, .child3, .child4, .child5{
margin:5px;
}
.parent{
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.child1{
  flex-basis: 200px;
  background: rgb(39, 61, 134);
  flex:1.5;
  border-radius: 5px;
}
.child2{
  flex-basis: 200px;
  background: rgb(172, 57, 53);
  flex:1;
  border-radius: 5px;

}
.child3{
  flex-basis: 200px;
  background: rgb(149, 43, 140);
  flex:1;
  border-radius: 5px;
}
.child4{
  flex-basis: 200px;
  background: rgb(149, 143, 140);
  flex:1;
  border-radius: 5px;

}
.child5{
  flex-basis: 200px;
  background: rgb(49, 43, 40);
  flex:1;
  border-radius: 5px;
}
.fcontainer{
  flex-basis: 200px;
  display:flex;
    flex-direction: row;
    flex:1;
}
.fjobcontact{
  flex-basis: 200px;
  display:flex;
    flex-direction: column;
  flex:1;
}
<div class="parent">
  <div class="fcontainer">
    <div class="child1"></div>
      <div class="fjobcontact">
        <div class="child2"></div>
        <div class="child3"></div>
      </div>
    </div>
  <div class="child4"></div>
  <div class="child5"></div>
</div>

Upvotes: 0

doğukan
doğukan

Reputation: 27411

You can rebuild this structure with grid system. And you will be able to use grid-gap.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.parent {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 10px;
  margin: 10px;
}

.parent > div {
  border-radius: 5px;
}

.child1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: rgb(39, 61, 134);
}

.child2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background: rgb(172, 57, 53);
}

.child3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background: rgb(149, 43, 140);
}

.child4 {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
  background: rgb(149, 143, 140);
}

.child5 {
  grid-column: 1 / 3;
  grid-row: 5 / 7;
  background: rgb(49, 43, 40);
}
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
  <div class="child4"></div>
  <div class="child5"></div>
</div>

Upvotes: 1

Related Questions