Question 225780 in Html Question posted in
Some basic documentation can be found here.

Html – the size of my input field and button with same width and height appears different

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 cant resolve as to why the innermost aspect/element in box model is using different sizes for the two cases

Tags:

2

Answers


  1. 0

    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:
    Input sizing

    Button:
    Button sizing

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search