The size of my input field and button with same width and height appears different

Question

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    background-color: #EEF0F4;
}

input {
    margin-top: 13px;
    color: #432000;
    background-color: #DCE1EB;
    border: none;
    border-radius: 7px;
    width: 10em;
    height: 3em;
}

button {
    margin-top: 13px;
    color: #FDFDFD;
    background-color: #AC485A;
    border: none;
    border-radius: 7px;
    width: 10em;
    height: 3em;
}

<div id="main">
    <img src="assets/cat.png" alt="cat image">
    <input type="text" id="input-field" placeholder="Bread">
    <button id="add-button">Add to cart</button>
</div>

input field box model button box model

I can't resolve as to why the innermost aspect/element in box model is using different sizes for the two cases.

score 1 · Answer 1 · answered Aug 08 '23 at 15:35

The issue is likely coming from your browser and not your CSS.

Because modern browsers like to add in their own custom styling first, many developers like to remove this browser styling with a reset CSS

See also Eric Meyer's Reset CSS 2

The simplest fix is to add box-sizing: border-box; as this is where the issue is actually coming from.

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  background-color: #EEF0F4;
}

input {
  margin-top: 13px;
  color: #432000;
  background-color: #DCE1EB;
  border: none;
  border-radius: 7px;
  width: 10em;
  height: 3em;
  box-sizing: border-box;
}

button {
  margin-top: 13px;
  color: #FDFDFD;
  background-color: #AC485A;
  border: none;
  border-radius: 7px;
  width: 10em;
  height: 3em;
  box-sizing: border-box;
}

<div id="main">
  <img src="assets/cat.png" alt="cat image">
  <input type="text" id="input-field" placeholder="Bread">
  <button id="add-button">Add to cart</button>
</div>

Now they are sized the same:
Input:

Button:

score 0 · Answer 2 · answered Aug 08 '23 at 15:43

You should use px so the height will be the same mandatory

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  background-color: #EEF0F4;
}

input {
  margin-top: 13px;
  color: #432000;
  background-color: #DCE1EB;
  border: none;
  border-radius: 7px;
  width: 10em;
  height: 40px;  //use the px unit
}

button {
  margin-top: 13px;
  color: #FDFDFD;
  background-color: #AC485A;
  border: none;
  border-radius: 7px;
  width: 10em;
  height: 40px; //use the px unit
}

<div id="main">
  <img src="assets/cat.png" alt="cat image">
  <input type="text" id="input-field" placeholder="Bread">
  <button id="add-button">Add to cart</button>
</div>

Using the _Inspect Element_ tool on the browser shows that these elements are still different sizes — Harrison, Aug 09 '23 at 08:26

The size of my input field and button with same width and height appears different

2 Answers2