Textarea input text is centered vertically-CodePudding

I got a problem when I make a text area, the text inside is centered vertically and not taking the whole space.

  .get-in-touch-info #input-area2 {
      background-color: #efefef;
      color: black;
      font-size: 1.3em;
      border: 2px solid #b0b0b0;
      width: 75%;
      height: 9rem;
      padding-left: 0.3em;
      margin-bottom: 1em;
    }

    <section >
          <div
            
          >
            <h2>get in touch</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
              quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
              Quisquam!
            </p>
            <input
              
              type="text"
              placeholder="Your Name"
              required
            />
            <input  type="text" placeholder="Gender" required />
            <textarea
              name=""
              id="input-area2"
              cols="10"
              rows="10"
              placeholder="Message"
            ></textarea>
            <button>SEND MESSAGE</button>
          </div>
        </section>

As you can try it only takes online to enter text but I want to use the whole space.
How can I prevent it?

CodePudding user response：

  .get-in-touch-info #input-area2 {
      background-color: #efefef;
      color: black;
      font-size: 1.3em;
      border: 2px solid #b0b0b0;
      width: 75%;
      height: 9rem;
      padding-left: 0.3em;
      margin-bottom: 1em;
      white-space: pre;
      overflow-wrap: normal;
      overflow-x: scroll;
}
    }

    <section >
          <div
            
          >
            <h2>get in touch</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
              quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
              Quisquam!
            </p>
            <input
              
              type="text"
              placeholder="Your Name"
              required
            />
            <input  type="text" placeholder="Gender" required />
            <textarea
              name=""
              id="input-area2"
              cols="10"
              rows="10"
              placeholder="Message"
            ></textarea>
            <button>SEND MESSAGE</button>
          </div>
        </section>

CodePudding user response：

If I understand you correctly you want the <textarea> element to not be in the center of the page.

By default textareas, inputs, and buttons are inline elements meaning that they will all happily line up in a row unless they are too long for the page and in that case they will wrap around. Most modern one page forms elements are not inline but lined up in a column. Hence, when I am styling forms I will often make all input elements display as blocks like this.

input, textarea, button, label {
    display: block;
}

Here is your original code with the new changes to the css.

.get-in-touch-info #input-area2 {
    background-color: #efefef;
    color: black;
    font-size: 1.3em;
    border: 2px solid #b0b0b0;
    width: 75%;
    height: 9rem;
    padding-left: 0.3em;
    margin-bottom: 1em;
}

input, textarea, button, label {
    display: block;
}

<section >
    <div >
        <h2>Get in touch</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
            quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
            Quisquam!
        </p>
        <input  type="text" placeholder="Your Name" required />
        <input  type="text" placeholder="Gender" required />
        <textarea name="" id="input-area2" cols="10" rows="10" placeholder="Message"></textarea>
        <button>SEND MESSAGE</button>
    </div>
</section>