为什么 textarea 的宽度和高度比 iframe 大？

Question

我有一个 textarea 和一个 iframe，但 iframe 比 textarea 小：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- here's textarea: --> <textarea name="texta" id="texta" cols="30" rows="10" style="width: 200px;height:200px;"></textarea> <!-- here's iframe: --> <iframe src="" frameborder="2" style="width:200px;height:200px;"></iframe> </body> </html>

但是如果你运行它，iframe 比 textarea 小。

Answer 1

不同的填充和边框。

将它们设置相同并且它们具有相同的大小

 iframe, textarea { width: 200px; height: 200px; border: 2px solid black; padding: 0; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- here's textarea: --> <textarea name="texta" id="texta"></textarea> <!-- here's iframe: --> <iframe src="" ></iframe> </body> </html>

Answer 2

Textarea 有一些由浏览器添加的padding 。 要使其恰好为200px ，请设置box-sizing属性：

textarea {
    box-sizing: border-box;
}

这将使您的textarea与您希望的一样宽。

Answer 3

您尚未将iframe的高度设置为等于 textarea。 事实是，当您设置任何元素的宽度时，实际上是在设置其内容的宽度，并且不包括该元素可能具有的内边距和边框。 还有一些元素有自己的预设填充和边框。 要克服这个问题，您可以将元素的box-sizing设置为border-box 。 通过这种方式，您可以设置元素的整个宽度和高度。 我建议您将以下属性添加到样式表中，以使所有元素边框装箱：

*{
  box-sizing: border-box;
}

另外，在下面的例子中，我使用了 flexbox。 查看输出，您将看到它正是您想要的：

 *{ box-sizing:border-box; } iframe{ height:170px; } textarea{ height:170px; margin:0; } .container{ display:flex; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <textarea name="texta" id="texta" cols="30" rows="10" style="width: 200px;"></textarea> <!-- here's iframe: --> <iframe src="" frameborder="2" style="width: 200px;"></iframe> </div> </body> </html>

为什么 textarea 的宽度和高度比 iframe 大？

问题描述

3 个解决方案

解决方案1
2 已采纳 2020-10-16 13:43:58

解决方案2
1 2020-10-16 13:44:14

解决方案3
1 2020-10-16 13:58:35

为什么 textarea 的宽度和高度比 iframe 大？

问题描述

3 个解决方案

解决方案1 2 已采纳 2020-10-16 13:43:58

解决方案2 1 2020-10-16 13:44:14

解决方案3 1 2020-10-16 13:58:35

解决方案1
2 已采纳 2020-10-16 13:43:58

解决方案2
1 2020-10-16 13:44:14

解决方案3
1 2020-10-16 13:58:35