1

I have been brushing up on some CSS positioning since I lack proficiency in the said concept and I can across some unexpected and unexplained gaps between two out of the three containers. I will attached the code for HTML and CSS below along with the output screenshot to make it less arcane.

body {
  margin: 0;
  padding: 0;
}

.red-container {
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  left: 200px;
  display: inline-block;
}

.blue-container {
  height: 100px;
  width: 100px;
  background-color: blue;
  position: relative;
  display: inline-block;
}

.yellow-container {
  height: 100px;
  width: 100px;
  background-color: yellow;
  position: relative;
  display: inline-block;
}
<div class="red-container"></div>
<div class="blue-container"></div>
<div class="yellow-container"></div>
Sarout
  • 821
  • 4
  • 25
Pratik Thorat
  • 403
  • 3
  • 7

1 Answers1

0

use flex-box, flex in css tricks

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
}

.red-container {
  height: 100px;
  width: 100px;
  background-color: red;
}

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

.yellow-container {
  height: 100px;
  width: 100px;
  background-color: yellow;
}
<div class="wrapper">
  <div class="red-container"></div>
  <div class="blue-container"></div>
  <div class="yellow-container"></div>
</div>

to remove the gap without using flex-box

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

.container {
  display: block;
  float: left;
  height: 100px;
  width: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}
<div class="red container"></div>
<div class="blue container"></div>
<div class="yellow container"></div>
Sarout
  • 821
  • 4
  • 25