Сделать кнопку и input на всю ширину контейнера

Question

У меня у input'a и у button'a задан:

width: 100%;

но почему то button меньше чем input:

Answer 1

У таких "сложных" элементов как input и button стоит обнулять дефолтные стили перед тем как приступать к дизайну, это поможет избежать "неожиданностей" впоследствии:

input {
  display: block;
  width: 100%;
  height: auto;
  font: inherit;
  letter-spacing: unset;
  word-spacing: unset;
  line-height: 1;
  text-shadow: none;
  text-align: unset;
  writing-mode: unset;
  text-rendering: unset;
  text-indent: 0;
  color: inherit;
  text-transform: none;
  background-color: unset;
  padding: 0;
  border: 1px solid;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
  margin: 0;
  appearance: none;
  cursor: default;
}

button {
  display: block;
  width: 100%;
  align-items: unset;
  font: inherit;
  font-variant-caps: unset;
  font-style: normal;
  font-weight: normal;
  font-variant-ligatures: unset;
  font-variant-numeric: unset;
  font-variant-east-asian: unset;
  font-stretch: unset;
  letter-spacing: unset;
  word-spacing: unset;
  line-height: 1;
  text-shadow: none;
  text-align: unset;
  writing-mode: unset;
  text-rendering: unset;
  text-indent: 0;
  color: inherit;
  text-decoration: none;
  text-transform: none;
  background-color: unset;
  padding: 0;
  border: 1px solid;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
  margin: 0;
  appearance: none;
  cursor: pointer;
}

<input placeholder="Например: Москва, Россия" />
<button>Узнать погоду</button>

Если Вы не используете решения типа Autoprefixer, то стоит так же добавить вендорные префиксы для свойств которым это необходимо.

БЛОГ НА HUSL

Сделать кнопку и input на всю ширину контейнера

Ответы (1 шт):