0

Почему то при назначении padding текстовые поля выходят за границы div, что я не так делаю?

код:

    input[type="text"]{
      padding: 8px 12px;
      display: block;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
    }
    
    .auth_form{
      width: 210px;
    }
    <div class="auth_form ">
        <h3>Авторизация</h3>
        <input type="text" class="" placeholder="Электронная почта"/>
        <input type="text" class="" placeholder="Пароль"/>
        <button type="button" >Вход</button>
      </div>
    

1 ответ 1

0

Добавьте к полям свойство box-sizing: border-box;. Из за данного свойства width будет включать в себя значения border и padding. Так же рекомендую почитать про box-model.

input[type="text"]{
      padding: 8px 12px;
      display: block;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    
    .auth_form{
      width: 210px;
    }
<div class="auth_form ">
        <h3>Авторизация</h3>
        <input type="text" class="" placeholder="Электронная почта"/>
        <input type="text" class="" placeholder="Пароль"/>
        <button type="button" >Вход</button>
      </div>

2
  • Благодарю, не знал такое свойство=) 5 дек 2018 в 15:20
  • @Чайник, Если вы используете фиксированую ширину, то лучше задать данное свойство ко всем елементам через селектор *
    – E_K
    5 дек 2018 в 15:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.