Question 270714 in Html Question posted in
Some basic documentation can be found here.

How to remove unwanted space after HTML textarea

I am trying to remove some unwanted spacing that exists after a textarea.
In this example (in Chrome) a small space exists after the textarea and none after the input.
In Firefox I can see spacing after both.
It doesn’t seem to be linked to border css.
I have tried several outline options.
Anyone have a solution?

.it{
  min-width: 100%;
  border: none;
  background-color: lightblue;
  outline: none;
}
.it:focus{
  border: none;
  outline: none;
}
<div>
<input class="it"/>
<textarea class="it"/></textarea>
<input class="it"/>
<textarea class="it"></textarea>
</div>
Tags:

2

Answers


  1. 0

    I think you can put specific height to textareas and user can expand it they want. margin: 0; removes a little bit of margins but not all of them.

    .it{
  min-width: 100%;
  border: none;
  background-color: lightblue;
  outline: none;
}
.it:focus{
  border: none;
  outline: none;
}

.specific-height {
  height: 18px;
}
    <div>
<input class="it"/>
<textarea class="it"/></textarea>
<input class="it"/>
<textarea class="it specific-height"></textarea>
</div>
    Login or Signup to reply.
  2. 0

    A classic, this is not about textarea elements, this is about spaces characters around.

    see also : How to remove the space between inline/inline-block elements?

    .it {
  min-width  : 100%;
  border     : none;
  background : lightblue;
  outline    : none;
  margin     :0;
  }
.it:focus {
  border  : none;
  outline : none;
  }
    <div>
     <input class="it"/><!--
  --><textarea class="it"/></textarea><!--
  --><input class="it"/><!--
  --><textarea class="it"></textarea>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search