Rotem87 Rotem87 - 1 month ago 20
CSS Question

Remove borders between div

I have the following HTML page -

<body>
<div class="blue" ></div>
<div style="padding-bottom: 0; margin-bottom: 0; display: inline-block" >
<div class="yellow" style="border-right: none" ></div>
<div class="red"></div>
<div class="yellow"></div>
</div>
<div class="green"></div>
</body>


The css -

.blue{
background-color: blue;
width: 800;
height: 100
}
.yellow{
background-color: yellow;
width: 150;
height: 400;
display:inline-block;
border-right: 0;
border-bottom: none;

}

.red{
background-color: red ;
width: 500;
height: 400;
display: inline-block;
padding: 0;
border: none;
}
.green{
background-color: green;
width: 800;
height: 100;
border-bottom:2px solid black;
margin-top: 0;
padding: 0;
border-top: none;
}


How can I remove the borders between the yellow div and the red?
I need the the box will be without internal borders.
(All the div box will be close.

Answer

.blue {
  background-color: blue;
  width: 800px;
  height: 100px;
}

.container {
  display: flex;
}

.yellow {
  background-color: yellow;
  width: 150px;
  height: 400px;
  display: inline-block;
  border-right: 0;
  border-bottom: none;
}

.red {
  background-color: red;
  width: 500px;
  height: 400px;
  display: inline-block;
  padding: 0;
  border: none;
}

.green {
  background-color: green;
  width: 800px;
  height: 100px;
  border-bottom: 2px solid black;
  margin-top: 0;
  padding: 0;
  border-top: none;
}
<div class="blue"></div>
<div class="container">
  <div class="yellow" style="border-right: none"></div>
  <div class="red"></div>
  <div class="yellow"></div>
</div>
<div class="green"></div>

I just add display: flex on parent element of yellow and red. Instead of inline-block