Блог

Главная - Вопросы по программированию - Изменение одного элемента влияет на другие элементы в этой строке

Изменение одного элемента влияет на другие элементы в этой строке

#css #padding #margin #spacing

Вопрос:

Предположим, что следующий код:

 *,
*:hover {
  transition: 0.2s all ease;
}

button {
  margin: 0% 5% 0% 5%;
  padding: 0% 1% 0% 1%;
}

button:hover {
  padding: 0% 2% 0% 2%;
} 
 <button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

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

Комментарии:

1. Вы можете определить абсолютное положение для этих кнопок или сохранить их в divs с фиксированным размером.

2. @CrynetOmega position:absolute полностью скрывает кнопки 1 и 2. Я, вероятно, не правильно понял. Для другого решения я помещаю каждый из них в другой div? Должен ли я указывать фиксированный размер для div(ов) или элементов?

3. Я бы поместил каждую кнопку в один div, центрировал ее и определил div с фиксированной шириной и высотой, например: width:200px; height:50px; возможно, еще один div со display:inline-block; всеми из них.

Ответ №1:

Уменьшите margin и убедитесь, что общая сумма одинакова ( 6% в вашем случае).

 *,
*:hover {
  transition: 0.2s all ease;
}

button {
  margin: 0% 5% 0% 5%;
  padding: 0% 1% 0% 1%;
}

button:hover {
  padding: 0% 2% 0% 2%;
  margin: 0% 4% 0% 4%;
} 
 <button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

Комментарии:

1. Связано ли это с тем, что увеличение заполнения и сохранение одинакового поля в коробке, которая всегда имеет одинаковый размер, технически невозможно?

2. @LercDsgn, что логично, потому что вы что-то добавляете , поэтому вам нужно также удалить что-то еще, чтобы сохранить общий размер таким же (или мы рассматриваем совершенно другой макет, и в этом случае есть много способов)

Метки: