Как расположить два квадрата в один ряд без отступа?

Рейтинг: 3Ответов: 2Опубликовано: 21.03.2011

Есть два квадрата: один черный, другой красный:
Когда я вывожу на страницу два квадрата:

#black {
  height: 50px;
  width: 50px;
  background: #000;
}

#red {
  height: 50px;
  width: 50px;
  background: ##FF0000;
}
<html>

<body>
  <div id="black"></div>
  <div id="red"></div>
</body>

</html>

то они естественно располагаются друг под другом (черный, а под ним красный), а мне надо их расположить друг за другом.

Как решить это?

css html
Источник: Stack Overflow на русском

Ответы

▲ 6Принят

#black {
  height: 50px;
  width: 50px;
  background: #000;
  float: left;
}

#red {
  height: 50px;
  width: 50px;
  background: ##FF0000;
  float: left;
}
<div style="float:left;">
  <div id="black">Первый блок</div>
  <div id="red">Второй блок</div>
</div>

▲ 2

добавить:

#black, #red {
    display:inline-block;
}