-1

I would like a textarea inside a fieldset to expand to the full width:

HTML

  <fieldset>
    <legend>Legendary</legend>
    <textarea>I'm supposed to fill the fieldset, but the padding/margin isn't the same.</textarea>
    <div></div>
  </fieldset>

CSS

textarea{width: 100%;}

https://jsfiddle.net/gL8bjtv9/4/

However, the left/right gaps (padding/margin) between the elements are different (Firefox, Chrome).

Why does this occur, and how can it be fixed?

Also: if I change the textarea's width from "100%" (1588px computed) to "1588px" in Firefox's Inspector, it seems OK.

handle
  • 5,859
  • 3
  • 54
  • 82

3 Answers3

0

Solution (browser-specific rules): https://stackoverflow.com/a/6796064/1619432

box-sizing: border-box;

Seems to work for Firefox, too.

handle
  • 5,859
  • 3
  • 54
  • 82
  • Accepting my own answer to mark this question as solved (based on timestamp), linking the previous question's answer. – handle Apr 10 '18 at 11:04
0

Mozilla web docs explains box-sizing best: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

You can also play around with their great box-sizing visual tool to assist in understanding the CSS property better.

Guy Lepage
  • 95
  • 1
  • 3
  • 12
-1

You could try doing this

textarea {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

}

or just adjust the rows attribute till it fits

<textarea rows="10" cols="4">I'm supposed to fill the fieldset, but the padding/margin isn't the same.</textarea>
richard4s
  • 138
  • 1
  • 2
  • 8