Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual representation of what I mean:
https://i.stack.imgur.com/yGYD1.png
(Please note that the dark theme effect is due to my GTK theme).
I am puzzled by this inconsistency, can anyone explain why this happens?
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 />