Textarea extra padding

Question

I cant remove the extra padding above and below the textarea in google chrome

https://jsfiddle.net/y4fe39mr/1/

<td rowspan="3" class="biginputcell">
                        <textarea class="biginput" type="textarea" name="notes" id="notes" value=""></textarea>
                    </td>

I cannot figure out where the extra 15px padding is comming from in chrome.

.biginput{
    width:230px;
    height:150px;
    font-size:0px;
    font-family:sans-serif;
    margin:0;
    padding:0;
    border:0px;
    resize: none;
    display: block
}
.biginputcell{
    background-color:blue;
    vertical-align:middle;
    height:160px;
}

I have accepted the answer pointing out the issue with rowspan because it was the direct fix to the issue. However as one of the answers pointed out divs are the better way to make my form, I will be changing the form to div tags rather than an overly complicated table.

Answer 1

The problem is that your column is middle aligned. If you align your textarea to the top, this won't happen.

I personally think there are too many unnecessary classes in your code. You should consider simplifying it. Also, I wouldn't recommend using table for structuring your forms. It can get quite confusing.

Here a suggestion for you.

*{
  margin:0;
  padding:0;
  border: 0;
  font-family:sans-serif;
}

.form {
  display: table;
  padding: 10px;
  background-color: blue;
}

.column {
  display: table-cell;
  vertical-align: top;
}
.column + .column {
  padding-left: 10px;
}

.form-group {
  display: table;
}

.form-group > * {
  display: table-cell;
}

.form-group + .form-group {
  margin-top: 10px;
}

.label {
  color: white;
  font-size:15px;
  min-width: 60px;
  line-height: 30px;
  vertical-align: middle;
  text-align: right;
  padding-right: 10px;
}

.input{
  width:230px;
  height:30px;
  resize: none;
}

.input.small {
  width: 90px;
}

.input.big {
  height: 150px;
}

.button{
  font-size:15px;
  height:90px;
  width:90px;
}

<form action="edit.php" method="POST" class="form">
      <div class="column">
        <div class="form-group">
           <label class="label" for="time">Time:</label>
           <input class="input" type="text" name="time" id="time" value="" />
        </div>
        <div class="form-group">
           <label class="label" for="events">Event:</label>
           <input class="input" type="text" name="events" id="events" value=""/>
        </div>
        <div class="form-group">
           <label class="label" for="notes">Notes:</label>
           <textarea class="input big" type="textarea" name="notes" id="notes" value=""></textarea>
        </div>
      </div>
      <div class="column">
        <div class="form-group">
          <select class="input small" id="preset" onchange="fillpreset(value)">
            <option value="0">PRESET</option>
            <option value="1">Pre Service</option>
            <option value="2">Worship</option>
            <option value="3">MC Bridge</option>
            <option value="4">Message AM</option>
            <option value="5">Message PM</option>
          </select>
        </div>
        <div class="form-group">
          <input class="button" type="submit" name="task" value="Go" />
        </div>
        <div class="form-group">
          <input class="button" type="submit" name="task" value="Clear" />
        </div>
      </div>

Answer 2

Change the rowspan=3 to rowspan=4 in your markup for the elements with classes biglabelcell and biglabelinput check the following code snippet

*{
	margin:0;
	padding:0;
}
textarea {
    overflow: hidden;
}
.edittable{
	height:240px;
	width:400px;
	border-collapse:collapse;
	overflow:hidden;
	table-layout: fixed;
}
.labelcell{
	width:60px;
	height:40px;
	font-family:sans-serif;
	background-color:blue;
}
.label{
	width:50px;
	height:30px;
	font-size:20px;
	font-family:sans-serif;
}
.biglabel{
	width:50px;
	font-size:20px;
	font-family:sans-serif;
}
.biglabelcell{
	background-color:blue;
}
.inputcell{
	width:240px;
	background-color:blue;
}
.input{
	width:230px;
	height:30px;
	font-size:15px;
	font-family:sans-serif;
	margin:0;
	padding:0;
	border:0px;
}
.biginput{
	width:230px;
	height:150px;
	font-size:0px;
	font-family:sans-serif;
	margin:0;
	padding:0;
	border:0px;
	resize: none;
	display: block
}
.biginputcell{
	background-color:blue;
	vertical-align:middle;
	height:160px;
}
.selectcell{
	width:100px;
	height:40px;
	font-size:15px;
	font-family:sans-serif;
	background-color:blue;
}
.select{
	width:90px;
	height:30px;
	border:0px;
}
.buttoncell{
	height:100px;
	width:100px;
	background-color:blue;
}
.button{
	height:90px;
	width:90px;
	border:0px;
}

		<form action="edit.php" method="POST">
			<table class="edittable">
				<tr>
					<td class="labelcell">
						<label class="label" for="time">Time:</label>
					</td>
					<td class="inputcell">
						<input class="input" type="text" name="time" id="time" value="" />
					</td>
					<td class="selectcell">
						<select class="select" id="preset" onchange="fillpreset(value)">
							<option value="0">PRESET</option>
							<option value="1">Pre Service</option>
							<option value="2">Worship</option>
							<option value="3">MC Bridge</option>
							<option value="4">Message AM</option>
							<option value="5">Message PM</option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="labelcell">
						<label class="label" for="events">Event:</label>
					</td>
					<td class="inputcell">
						<input class="input" type="text" name="events" id="events" value=""/>
					</td>
					<td rowspan="2" class="buttoncell">					 
						<input class="button" type="submit" name="task" value="Go" />
					</td>
				</tr>
				<tr>
					<td rowspan="4" class="biglabelcell">
						<label class="biglabel" for="notes">Notes:</label>
					</td>
					<td rowspan="4" class="biginputcell">
						<textarea class="biginput" type="textarea" name="notes" id="notes" value=""></textarea>
					</td>
				</tr>
				<tr>
				</tr>
				<tr>
					<td rowspan="2" class="buttoncell">		
						<input class="button" type="submit" name="task" value="Clear" />
					</td>
				</tr>

Hope this helps. If not can you please explain how the page should look like a snapshot would be helpful