Как сделать «квадраты» одного размера?

Для создания квадратов одного размера в HTML вы можете использовать CSS. Вот несколько способов, которые помогут вам достичь этого.

Метод 1: Используйте свойство width и height с одинаковыми значениями

<div class="square"></div>

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

В этом примере мы создаем квадратный элемент с классом "square". Устанавливая одинаковые значения для свойств width и height (например, 100px), мы гарантируем, что элемент будет иметь квадратную форму.

Метод 2: Используйте свойство padding для создания квадратной области внутри блока

<div class="square"></div>

.square {
  width: 100px;
  padding: 100px; 
  background-color: red; 
}

В этом примере мы устанавливаем ширину блока "square" на 100px, а затем используем свойство padding с тем же значением (100px). Таким образом, блок будет иметь квадратную область внутри себя.

Метод 3: Используйте псевдоэлементы ::before или ::after

<div class="square"></div>

.square {
  width: 100px;
  height: 0;
  position: relative;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%; /* задайте здесь нужное соотношение сторон (например, 1:1, то есть 100%) */
  background-color: red;
}

В этом примере мы создаем контейнер "square" с шириной 100px, а высоту устанавливаем на 0. Затем мы используем псевдоэлемент ::before для создания квадратной области внутри блока. Устанавливаем относительное позиционирование для контейнера, а затем используем свойство content для создания пустого элемента. Устанавливаем отображение блока (display: block), чтобы элемент занимал всю доступную ширину. Затем устанавливаем padding-top с тем же значением, что и ширина, чтобы создать квадратную область.

Теперь у вас есть несколько способов создания "квадратных" элементов в HTML с помощью CSS. Выберите тот, который лучше всего соответствует вашим потребностям и требованиям дизайна.