textareaにmargin: 0;をかけても余白が残る

Question

marginが消えない

初めての質問なので拙いところがあると思います。

Webサイトの練習をしていたのですが、画像のような余白ができてしまいました。検証ツールを使ったところ、<textarea>タグにmarginがかかっているそうなんですが、左の余白の図にはmarginがどの方向にもかかっていない判定になっています。

見にくいかもしれないので別パターンも貼っておきます。

実現したいこと

• textareaの右にできた余白を消したい

該当のソースコード（HTML）

<div class="heading">
        <h2>Contact</h2>
      </div>
      <form action="" method="">
        <table>
          <tr>
            <th><label for="name">NAME</label></th>
            <td><input name="name" id="name"></td>
          </tr>
          <tr>
            <th><label for="e-mail">E-mali</label></th>
            <td><input name="e-nail" id="e-mail"></td>
          </tr>
          <tr>
            <th><label for="message">MESSAGE</label></th>
            <td><textarea name="message" id="message"></textarea></td>
          </tr>
        </table>
        <div class="submit-button">
        <input type="submit" value="送信" id="submit">
      </div>
      </form>

該当のソースコード（CSS）

th {
  font-weight: normal;
  text-align: left;
  width: 150px;
  vertical-align: top;
}

textarea {
  height: 9em;
}

.submit-button {
  text-align: center;
}

#submit {
  padding: 10px 90px;
  background: rgb(0, 0, 17);
  color: white;
  border: rgb(0, 0, 17);
}

試したこと

• <textarea>と<td>にmargin: 0;をかけても変化なし
• 全角スペースなし

調べてみたら line-height: 0;にしろ、中に配置されている要素をブロック要素にしろというものもありましたがどれも変化なしです。
dynabook V72/JLEで型番:PV82JLECNRDQEです。VSCodeを使ってます。

Answer 1

margin がついているようには見えません。textarea の幅を指定してください。

Comments

[amagiri]

すみません。marginは効かなかったので一旦消していたのですが、その状態でコピペしてしまいました。widthを指定したらmarginが消えたのですが、なぜwidthを指定していないinputには何も起こってないのでしょうか。

[arcxor]

input と textarea の幅を指定していないとデフォルトの内在幅で表示されます。textarea のその内在幅が input より短いだけです。textarea に margin がついているわけではありません。