textarea 后白色 space

Question

我用 HTML 和 CSS 制作了联系表。但是我在 textarea 元素之后看到了一些 space 。我用一个输入元素替换它并且 space 消失了，所以它与文本区域有关。 textarea 元素后的白色 space 是什么，如何去除？

form {
  width: 100%;
  box-sizing: border-box;
  background-color: white;
  border: solid 2px black;
}
input, textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px 20px 70px;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: black;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: 10px center;
  outline: none;
  background-color: #E3FF00;
}
input[type=submit] {
  border-style: none;
}

<form>
 <input type="text" placeholder="Your Name" /><br />
 <input type="email" placeholder="Your EMail Address" /><br />
 <input type="text" placeholder="Your Message Subject" required="required" /><br />
 <textarea rows="5" placeholder="Your Message" required="required"></textarea><br />
 <input type="submit" value="Send" /><br />
</form>

Answer 1

不要在表单 css 中的每个元素后使用 <br>，而是使用这个

form{    
display: flex;
flex-direction: column;
}

并删除所有 <br> 标签。你的问题就迎刃而解了。

Answer 2

列的flex-direction的display flex解决了

form {
  width: 100%;
  box-sizing: border-box;
  background-color: white;
  border: solid 2px black;
  display:flex;
  flex-direction: column;

}
input, textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px 20px 70px;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: black;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: 10px center;
  outline: none;
  background-color: #E3FF00;
}
input[type=submit] {
  border-style: none;
}

<form>
 <input type="text" placeholder="Your Name" />
 <input type="email" placeholder="Your EMail Address" />
 <input type="text" placeholder="Your Message Subject" required="required" />
 <textarea rows="5" placeholder="Your Message" required="required"></textarea>
 <input type="submit" value="Send" />
</form>

textarea 后白色 space

White space after textarea

html

css

textarea

whitespace