Zenn
🚀

doctypeをhtmlにするとtextareaの下に余白ができる？

2024/04/28に公開
HTML
tech

以下のHTMLをブラウザで表示すると、textareaの下に謎の余白が発生します。
デベロッパーツールで確認してもmarginもpaddingも0です。

<!doctype html>
<html>
<head>
</head>
<body>
<h1>table.html</h1>
<table>
  <tr>
    <td>
      <textarea>test</textarea>
    </td>
  </tr>
</table>
<style>
table, tr, th, td {
  border: 1px solid black;
}
</style>
</body>
</html>


html を _html として無効にすると余白は消えます。

これは何故なんでしょうか？

解決策

textareaにdisplay:blockを追加する

textarea{
　　display:block;
}

参考サイト：https://jiguma.com/table-textarea/
これで解決できるなら良いと思います。

doctypeからhtmlを消す

doctypeを指定する必要ってあるんでしょうか？なくても困らない気がします。

<!doctype>
<html>
<div>
    <textarea></textarea>
</div>
</html>

Discussion