Ciao,
premesso che di css non capisco granchè, il problema che mi trovo ad affrontare è il seguente: nell'immagine allegata è possibile notare il differente spazio lasciato fra i vari span.



Cosa sbaglio nel css?


Codice HTML
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prova</title>
<style>
* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.errore { border: 1px solid #00f; }
input, textarea { padding: 3px; }
.errore select { margin-bottom: 7px; }
.errore input { margin-bottom: 9px; }
.errore textarea { margin-bottom: 4px; }
.mErrore { border: 1px solid #f00;}
</style>
</head>
<body>
<form id="form1" method="post" action="">
  <table width="600" border="0" cellpadding="10" cellspacing="10">
    <tr>
      <td>Campo 1</td>
      <td>
  	<span class="errore"><input type="text" name="textfield" /></span>
		
<span class="mErrore">Errore</span>
	  </td>
    </tr>
    <tr>
      <td>Campo 2</td>
      <td><span class="errore"><select name="select" id="select">
      <option>asd</option>
      <option>lol</option>      
      </select></span>
		
<span class="mErrore">Errore</span>
      </td>
    </tr>
    <tr>
      <td>Campo 3</td>
      <td>
        <span class="errore"><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></span>
		
<span class="mErrore">Errore</span>
      </td>
    </tr>
  </table>
</form>
</html>