Where is the extra space coming from around this textarea?

Question

I came across a weird problem with my textarea where I still have leftover space around my textarea even after removing all the styling.

In the example below I removed all the styling from the textarea except for the default 2px padding. The padding changes to 0px on active/focus, but you can still see 1px of space left.

I tried:

• giving the container a fixed height and width
• giving the container padding: 0;
• giving the textarea the same fixed height and width
• changing the textarea's outline-offset to 0

but to no avail..

Question

Where is the extra pixel/space coming from?

Demo:

.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
}

textarea:focus,
textarea:active {
  outline: none;
  padding: 0;
}

<div class="container">
  <textarea></textarea>
</div>

Answer 1

You need to use box-sizing: border-box; in texarea or all element. my recommendation is use in all elements.

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added.

* {
  box-sizing: border-box;
}
.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
}

textarea:focus,
textarea:active {
  outline: none;
  padding: 0;
}

<div class="container">
  <textarea></textarea>
</div>

Answer 2

Your textarea width is greater the the container: 100% + 2px of border + 2px left padding + 2px right padding

So used box-sizing: border-box; in textarea.

The box-sizing property allows us to include the padding and border in an element's total width and height.

.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

textarea:focus,
textarea:active {
  outline: none;
  padding: 0;
}

<div class="container">
  <textarea></textarea>
</div>

Answer 3

just add box-sizing: border-box; in textarea

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  box-sizing: border-box; // Added
}