为什么 Textarea 宽度和 DIV 宽度的行为如此不同？答案

【问题标题】：Why does Textarea width and DIV width behave so differently?为什么 Textarea 宽度和 DIV 宽度的行为如此不同？
【发布时间】：2016-04-07 12:55:14
【问题描述】：

我有一系列 div 框，后跟一个 textarea 具有相同的类以采用相同的样式，但我注意到 div 似乎自动填充父级的水平宽度，而 @ 987654325@ 没有。提供textarea width:100% 可以解决问题，但是如果我提供共享类margin-left:80px，textarea 会超过父级，而div 框不会。

我只是想知道为什么会发生这种行为，以及是否可以使用textarea 复制它。到目前为止，我最干净的解决方案是提供 textarea width:calc(100%-80px) 但更喜欢更“自然”的解决方案。

这是一些示例代码：-

HTML

<body>

    <div class="container">

        <div class="box">
        DIV
        </div>

        <div class="box">
        DIV
        </div>

        <form>
            <textarea class="box">TEXTAREA</textarea>
        </form>

    </div>

</body>

CSS

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 80px
}

textarea {
   width: calc(100% - 80px); // CLEANISH SOLUTION
}

这是一个 JSFiddle：https://jsfiddle.net/tndm2eqz/1/

【问题讨论】：

标签： html css width textarea

【解决方案1】：

它确实应用了给定的 CSS，但 <form> 介于两者之间，因此 width 没有被正确继承：https://jsfiddle.net/tndm2eqz/3/

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 80px;
}

form {
  margin: 0 0 50px 80px;
  padding: 0;
}

textarea.box {
  width: 100%;
  display: block;
  margin:0;
  box-sizing: border-box;
}

<body>

  <div class="container">

    <div class="box">
      DIV
    </div>

    <div class="box">
      DIV
    </div>

    <form>
      <textarea class="box">TEXTAREA</textarea>
    </form>

  </div>

</body>

【讨论】：

您的解决方案还添加了width: 100%; 和box-sizing: border-box;。为什么？
继承应该通过textarea 传递到form 吗？我还尝试为form 和textarea 指定width:inherit 和width:100%，但都没有产生预期的结果，这是为什么呢？
@DarkDust box-sizing 已经为 .box 设置了，它包括边框和填充到宽度计算中......默认情况下 textarea 有
@Alluziion inherit for width 仅在父级设置了宽度时才有效，而表单没有。 form 有 margin 并且是 block ，所以不需要设置 width:100%。 textarea 具有默认大小，即使 display:block 也不要覆盖它。 /你有 width:100% + margin from .box 实际上是 100% 窗口的宽度 + 80px ，太多了;) ，所以我们给表单的边距，并要求 textarea 填充表单中可用的整个宽度:)

【解决方案2】：

div 的显示类型是 block，与 textarea 不同。如果您希望 textarea 的行为与 div 一样，请添加：

textarea{
    display: block;
}

不要忘记textarea 的边框和阴影。

【讨论】：

将 display:block 添加到 textarea 对我提供的 JSFiddle 中的结果没有影响。我还尝试了其他几个显示值，但均无济于事。

【解决方案3】：

textarea 默认不是display:block，你必须将display:block 和width:100%; 添加到你的textarea 所以，你为什么不把textarea 放在.box div 中，然后用block 设置textarea width:100%。例如

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box,.box textarea  {
  height: 80px;
  background: #888;
  box-sizing: border-box;
}
.box{
  margin: 0 0 50px 80px;

}
.box textarea {
  display: block;
  width: 100%;
}

<div class="container">
    <div class="box"> DIV </div>
    <div class="box"> DIV </div>
    <form>
        <div class="box">
            <textarea>TEXTAREA</textarea>
        </div>
    </form>
</div>

【讨论】：

您已更改 HTML 结构。我认为重点是使其看起来相同，同时保留结构以了解大小不同的原因。

【解决方案4】：

    .container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
  width:100%;
  margin:0px;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 0;
  width:100%;
}

 <body>
  
  <div class="container">
    <div class="box">
    DIV
    </div>

    <div class="box">
    DIV
    </div>

    <form>
      <textarea class="box" rows="10">TEXTAREA</textarea>
    </form>

  </div>

</body>

【讨论】：

只是一些没有任何解释的代码几乎是没有用的。请说明您所做的更改以及更改的原因。