FirstOrderKylo FirstOrderKylo - 3 months ago 15
CSS Question

Input button wont extend to width set in CSS?

Im trying to make a simple form and in it I have a text box and a button. However I set the width of both to 500px for testing purposes and the text field goes to the correct length but the submit button is 12 pixels less?

enter image description here

Here's the Code:



input,
textarea {
width: 500px;
}

<label>Name</label><br>
<input name="name" placeholder="Your name...">

<br>
<br>

<label>Message</label><br>
<textarea name="message" placeholder="Your message..."></textarea>

<br>
<br>

<input id="submit" name="submit" type="submit" value="Submit">





The message box and the name box both are the correct width but the submit button is around 10 pixels less.

EDIT : SOLUTION

Thanks to help below, I found the solution, needed to add

box-sizing: border-box


to the CSS for input & textarea and now it works correctly.

Answer

You can use box-sizing: border-box; to include padding and borders (that are set by default) into your width. See MDN for more information about box sizing.

input,
textarea {
  width: 500px;
  box-sizing: border-box;
}
<input name="name" placeholder="Your name...">
<textarea name="message" placeholder="Your message..."></textarea>
<input id="submit" name="submit" type="submit" value="Submit">

Comments