How to get input fields and submit button same size

Question

I'm new to this site and a beginner at html and css. I'm working on a personal project for practice and the design calls for both the input box and submit button to be a height of 55px and a width of 320 px. Both of these include a 2px border and a 15px padding. I'm not sure why my current code is not producing the same sizes. The input button is clearly smaller (both width and height) than the input boxes.

Any help would be appreciated.

body {
  background-color: blue;
}

/* LOGO */

.logo img {
  height: 35px;
  padding: 50px;
  display: block;
  margin: 0 auto;
}

/* FORM */

.form {
  background-color: white;
  width: 400px;
  height: 500px;
  padding: 40px;
  border-radius: 5px;
  margin: 0 auto;
}

h1 {
  font-family: "Courier New", Courier;
  font-weight: normal;
  text-align: center;
  padding: 20px;
}
input[type='email'],
input[type='password'],
button[type='submit']{
  height: 38px;
  width: 303px;
  border: 2px solid gray;
  padding: 15px;
  margin: 15px auto;
  display: block;
  font-size: 15px;
  border-radius: 5px;

}

button {
  background-color: green;
}

span {
  color: white;
}

<div class="logo">
  <img src="images/logo.png" alt="AnalogSea logo">
</div>

<div class="form">
  <h1>Sign up</h1>
  <form action="/signup" method="post" class="form_section">
    <label class="email button_size" for="email" required>Email</label><br>
    <input placeholder="[email protected]" type="email" name="email" id="email"><br>
    <label class="email button_size" for="password" required>Password</label><br>
    <input placeholder="1234passw0rd" type="password" name="password"><br>
    <button type="submit"><span>Sign Up</span></button>
  </form>
</div>

Answer 1

The reason it's happening is the way the box-model is rendered in browsers. In your example, the padding is what is causing the issue. For the button, the padding and border is included in the 303px, so the button is a total of 303px wide. For the <input> elements, the padding and border is added to the total width, giving it a width of 337px.

To fix this you can go about it a couple ways. You can reset the box-sizing (the property in CSS that handles this) globally like:

* { box-sizing: border-box }

Or you can add that to just the <input> elements.

input[type="whatever"] { box-sizing: border-box }

I personally do it globally as a reset, to make things consistent. That's a my preference.

If you do this, you'll have to readjust the height on your elements to 68px, because now the padding will be considered as part of the height property, not added to it.

Here's some reading on the box-model: http://www.w3schools.com/css/css_boxmodel.asp

Here's some reading on the box-sizing property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Hope this helps!