Как правильно установить процентное значение для margin, чтобы избежать нарушения расположения блока?

1. Чтобы избежать нарушения расположения блока при использовании процентного значения для margin, рекомендуется использовать относительную величину, такую как em или rem, вместо процентов. 

Например, если у вас есть блок с классом "block" и вы хотите задать отступ справа и слева в 10% от ширины родительского контейнера, следует использовать следующий код:

```css
.block {
  margin: 0 10%;
}
```

Таким образом, отступы справа и слева будут составлять 10% от ширины родительского контейнера.

2. Чтобы реализовать responsive отступ между кнопками, можно использовать flexbox или CSS Grid.

С помощью flexbox:

```css
.container {
  display: flex;
  justify-content: space-between;
}

.button {
  margin-right: 1em; /* задаем отступ между кнопками */
}
```

С помощью CSS Grid:

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* автоматическое размещение кнопок в строку */
  grid-gap: 1em; /* задаем отступ между кнопками */
}
```

Оба подхода позволяют создавать адаптивные отступы между кнопками, учитывая их изменяющийся размер и количество. Применяйте тот, который лучше соответствует вашим потребностям и требованиям дизайна.

размер отступа между кнопками должен зависеть от ширины браузера и размеров самих кнопок. Для этого можно использовать следующий код:

block {
  --btn-width: 10vw;
  --gap: 1.25vw;
  background: red;
  padding: var(--gap);
  display: inline-flex;
  box-sizing: border-box;
  gap: var(--gap);
}

button {
    width: var(--btn-width);
    height: var(--btn-width);
    margin: 0;
    flex-shrink: 0;
}