How can I create a small color box using html and css?

by

With old browsers, you would often use float, but then you would need a clearfix so this approach is not used often these days.

.box {
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}
<div class="box blue"></div>
<div class="box purple"></div>
<div class="box wine"></div>

In modern browsers, the easiest way is with flexbox:

.wrapper {
  display: flex;
}

.box {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}
<div class="wrapper">
  <div class="box blue"></div>
  <div class="box purple"></div>
  <div class="box wine"></div>
</div>

Or alternatively with display: inline-block:

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}
<div class="box blue"></div>
<div class="box purple"></div>
<div class="box wine"></div>

Leave a Comment