HTML输入和按钮的宽度不同

Question

我目前有一个奇怪的问题，我的input和button标签在代码上具有相同的宽度（ width: 341.5px;从$(window).width() / 4计算得出），但是它们在同一位置几乎没有视线宽度。 这是我的意思：

（黑暗主题来自我的GTK主题）。

为什么这样做呢？

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

 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; } 

 <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 /> 

Answer 1

我复制粘贴了您的代码，仅添加了1个CSS块：

* {
    box-sizing: border-box;
}

/* OR */

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

运行下面的代码段。

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

 * { 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; } 

 <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 /> 

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

使用此值，可以计算元素的宽度和高度与其元素的边框和边框无关。 因此， width: 10px为10 15px ， padding: 5px为5 15px的元素在显示时实际上为15 15px宽。

通过将其box-sizing border-box ，可以将填充和边框纳入计算范围。 因此， width: 10px和padding: 5px实际上仅在显示时为10px宽（尽管其内部的内容变为0px宽，因为两边的填充各占5px ）。

在这里和这里了解更多信息。

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