CSS. Ширина вычислений, отличная от указанной.

88
12

Как показано в этом бункере, ширина, указанная для кнопки предварительного просмотра, составляет 120 пикселей, а отображаемая ширина всегда равна 132 px (на разных экранах).

.btn-grey{
cursor: pointer;
background: #f1f3f6;
border: 1px solid #d7d9e1;
box-shadow: 1px 1px 1px #fff inset;
border-radius: 3px;
color: #838AAB;
display: inline-block;
height: 30px;
padding: 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div style="display: flex; width: 60%; justify-content: center;">
<input name="preview" class="btn-grey" value="Preview" style="flex-basis: 120px; width: 120px; height: 35px;max-width: 120px; max-height: 35px; margin : 5px 5px 5px 5px " title="preview"/>
<input name="load" class="btn-grey" type="submit" value="Load " style="width: 120px; height: 35px;max-width: 120px; max-height: 35px;margin : 5px 5px 5px 5px "/>
</div>

</body>
</html>

спросил(а) 2017-11-17T12:54:00+03:00 2 года, 3 месяца назад
1
Решение
60

Просто добавьте box-sizing: border-box; в стиле кнопок

Это позволит убедиться, что свойства ширины и высоты (и свойства min/max) содержат контент, заполнение и границу, но не маржу.

Для получения дополнительной информации о box-sizing проверьте следующую ссылку: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

ответил(а) 2017-11-17T12:59:00+03:00 2 года, 3 месяца назад
59

Все, что вам нужно, это добавить box-sizing: border-box для input.

Причина заключается в том, что элементы box-sizing по умолчанию для content-box, которые означают его padding/border по умолчанию добавляют к его заданной width, а с box-sizing: border-box он получает вычисленную в нем.

Src: https://drafts.csswg.org/css-box-3/#width-and-height

В качестве примечания, другим вариантом будет использование CSS Calc(), например:


    width: calc(wanted_width - left/right_padding - left/right_border)

Фрагмент стека

input {
box-sizing:border-box
}

.btn-grey{
cursor: pointer;
background: #f1f3f6;
border: 1px solid #d7d9e1;
box-shadow: 1px 1px 1px #fff inset;
border-radius: 3px;
color: #838AAB;
display: inline-block;
height: 30px;
padding: 0 5px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div style="display: flex; width: 60%; justify-content: center;">
<input name="preview" class="btn-grey" value="Preview" style="flex-basis: 120px; width: 120px; height: 35px;max-width: 120px; max-height: 35px; margin : 5px 5px 5px 5px " title="preview"/>
<input name="load" class="btn-grey" type="submit" value="Load " style="width: 120px; height: 35px;max-width: 120px; max-height: 35px;margin : 5px 5px 5px 5px "/>
</div>

</body>
</html>

ответил(а) 2017-11-17T13:00:00+03:00 2 года, 3 месяца назад
50

Привет, попробуйте это:

.btn-grey{
box-sizing:border-box;
}

ответил(а) 2017-11-17T13:03:00+03:00 2 года, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема