Narrowing the height between submit button and contents input form


<!DOCTYPE html>
<html>

  <head></head>

  <body>
    <div style="font-size:2rem;display:inline-block;margin:5px;padding:10px;border-style:solid;border-radius:15px;text-align:left;background:lavender;border:2px solid silver">

      <div>
        <input type="text" value="title" style="width:300px; height:30px">
      </div>

      <div>
        <textarea style="width:300px; height:200px">contents
        </textarea>
      </div>

      <div class="alnCenter">
        <input type="submit" value="submit" style="width:300px; height:30px">
      </div>

    </div>
  </body>

</html>

I have the code above at http://dot.kr/x-test/inputForm.htm .

How can I control the height between the top line of the submit button and the bottom line of the contetns input form.

I like to make the gap between the top line of the submit button and the bottom line of the contetns input form to be more narrowed.

You can delete the font-size being applied to the parent div:


<div style="[color=red]font-size:2rem[/color];display:inline-block;margin:5px;padding:10px;border-style:solid;border-radius:15px;text-align:left;background:lavender;border:2px solid silver">

You can then set the space above the submit button by applying a margin-top to:

<div class="alnCenter" style="[color=blue]margin-top:2px;[/color]">