HTML输入和按钮宽度不一样

Question

我目前有一个奇怪的问题，我的input和button代码在代码中具有相同的宽度（width: 341.5px;从$(window).width() / 4计算），但是在视线附近没有相同的宽度。这就是我的意思：

（黑暗的主题是我的GTK主题）。

为什么会这样做？

＆＃13;

＆＃13;

var screenWidth = $(window).width();
var screenHeight = $(window).height();
$(".userName").css("width", screenWidth / 4);
$(".passWord").css("width", screenWidth / 4);
$(".submit").css("width", screenWidth / 4);

＆＃13;

body {
  margin: 0;
  padding: 16px;
}

.userName {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #FF8A80;
  color: #000000;
  padding: 16px;
}

.passWord {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #FF8A80;
  color: #000000;
  padding: 16px;
}

.submit {
  background-color: transparent;
  border: 2px solid #FF8A80;
  color: #000000;
  padding: 16px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.submit:hover {
  background-color: #FF8A80;
  border: 2px solid transparent;
  color: #FFFFFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="userName" class="userName" title="This area is for your unique username" placeholder="Your username here" required autofocus />
<br />
<input type="password" name="passWord" class="passWord" title="This area is for your unique username" placeholder="Your password here" required />
<br />
<button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right">Submit</button>
<br />

＆＃13;

＆＃13;

＆＃13;

Answer 1

我复制粘贴你的代码，只添加了1块css：

* {
    box-sizing: border-box;
}

/* OR */

input, button {
    box-sizing: border-box;
}

运行下面的代码段。

＆＃13;

＆＃13;

var screenWidth = $(window).width();
var screenHeight = $(window).height();
$(".userName").css("width", screenWidth / 4);
$(".passWord").css("width", screenWidth / 4);
$(".submit").css("width", screenWidth / 4);

＆＃13;

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 16px;
}

.userName {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #FF8A80;
    color: #000000;
    padding: 16px;
}

.passWord {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #FF8A80;
    color: #000000;
    padding: 16px;
}

.submit {
    background-color: transparent;
    border: 2px solid #FF8A80;
    color: #000000;
    padding: 16px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.submit:hover {
    background-color: #FF8A80;
    border: 2px solid transparent;
    color: #FFFFFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="userName" class="userName" title="This area is for your unique username" placeholder="Your username here" required autofocus  />
<br />
<input type="password" name="passWord" class="passWord" title="This area is for your unique username" placeholder="Your password here" required />
<br />
<button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right" >Submit</button>
<br />

＆＃13;

＆＃13;

＆＃13;

所有元素的box-sizing属性的默认值为content-box。

使用此值，计算元素的宽度和高度与其填充和边框无关。因此，展示width: 10px和padding: 5px的元素实际上是15px宽。

通过创建box-sizing属性border-box，它包括填充和边界计算。因此，width: 10px和padding: 5px实际上仅10px宽显示（尽管其内容变为0px宽，因为两边的填充每个都占用5px。< / p>

详细了解here和here。

注意： margin值不会影响任何一种情况。