100% ширина минус маржа и отступ

Ответ 1

Вы можете использовать calc, современные браузеры поддерживают его и IE9 +.

div {
  position: absolute;
  height: 20px;
  width: calc(50% - 10px);
  padding: 5px;
}

Демо

Поддержка браузера

Ответ 2

Looe width:100%;, затем просто используйте столько отступов, сколько хотите:

#login_box {
    padding:10px;
    margin:50px;
}

Demo http://jsfiddle.net/PFm3h/

Изолированный эффект:

Демо http://jsbin.com/ozazat/1/edit

Много дополнений, много полей, никаких проблем.

Ответ 3

Элементы уровня блока естественным образом заполняют их родительские элементы, однако, если вы специально задаете ширину, вы переопределяете это поведение, позволяя добавлять границу и границу к указанной ширине. Вы указываете ширину 100% на теле, что дает возможность для нее переполнять документ по горизонтали, если есть элемент, предоставленный ему правой внутренней кромкой.

Пример: http://jsfiddle.net/trex005/6earf674/

Простым средством для этого является прекращение объявления ширины тела. Если по какой-либо причине это требуется, вы можете установить маржу в 0; Тот же принцип применяется к вводу, но он немного сложнее. Входы (текст/пароль) и текстовые поля, даже если они установлены для отображения в виде блока, получат их ширину от размера и столбцов соответственно. Это можно переопределить, указав ширину в CSS, однако у них также есть пользовательский агент, заданный границами и полями, чтобы у вас снова возникла проблема переполнения. Чтобы исправить это переполнение, вам нужно установить входной дисплей для блокировки и его размер окна: border-box. Пограничный блок будет вычислять границы и отступы как часть ширины.

input[type="text"], input[type="password"] {
    width: 100% !important;
    margin: 5px !important;
    box-sizing:border-box;
    display:block;
}

Как только вы это сделаете, вы заметите, что между элементами есть дополнительное расстояние. Это связано с тем, что дисплей: блок заставляет разрывать линию, а теги <br>, которые вы добавили, являются избыточными. Удалите их, и вы в бизнесе!

Демо: http://jsfiddle.net/trex005/6earf674/1/

Ответ 4

Другим решением является установка абсолютных значений INPUT и добавление реквизитов влево/вправо:

#login_box {
    width: 100%;
    position:relative;
}

input[type="text"], input[type="password"] {
    position:absolute;
    left:5px;
    right: 5px
}

Вам нужно будет отрегулировать поля и т.д., так как они будут отсутствовать из относительного потока макета. Вы также можете добавить прокладки без проблем, так как вы не установили фиксированную ширину.

Этот метод широко поддерживается во всех браузерах.

Демо: http://jsfiddle.net/wuSDh/3/

Ответ 5

У меня была эта проблема со 100% высотой, и в конце концов меня поразило, что ответом является использование отступа для элемента выше 100% высоты/ширины (то есть родителя).

<div style="padding: 1rem;">
    <div style="height:100%; width:100%">
        <p>The cat sat on the mat</p>
    </div>
</div>

Короче говоря, отступы родительского элемента имеют тот же эффект, что и поля дочернего элемента!

Ответ 6

Вы можете настроить ширину текстового поля от 100% до 95%. Теперь это выглядит хорошо

input[type="text"], input[type="password"] {
    width: 95% !important;
    margin: 5px !important;
}

Смотрите это: http://jsfiddle.net/wuSDh/