Как сделать блок в строчку css

Чтобы разместить блоки в строчку в CSS, вы можете использовать свойство display со значением inline-block. Это позволит блокам занимать только необходимое место на странице, не переносить их на новую строку и разместить их в строчку.

Пример:

HTML:

<div class="block-container">
  <div class="block">
    <p>Блок 1</p>
  </div>
  <div class="block">
    <p>Блок 2</p>
  </div>
  <div class="block">
    <p>Блок 3</p>
  </div>
</div>

CSS:

.block {
  display: inline-block;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

Этот код создаст три блока внутри контейнера с классом block-container, каждый из которых занимает только необходимое место на странице и размещается в строчку блоков. Каждый блок содержит параграф с текстом, а также стили для фона, обводки, отступов и т.п.

Важно помнить, что при использовании свойства display: inline-block в CSS, элементы могут быть подвержены проблемам с образованием пробелов и переносами строк. Чтобы избежать этого, исключите пробелы из между элементами или заключите все элементы в один контейнер.