CSS spacing is off, not sure what's causing - html

Question

I'm working on a form and need to include a note above the reCAPTCHA field. I've got everything in place, but the spacing between the *To submit your message, please type the words shown below: note and reCAPTCHA is way off, I need to figure out how to bring the two elements closer together vertically.
I'm using a paragraph tag in the form for the note, I'm not sure if that's bad form??
Website Link
CSS:
/*Prayer Request Form*/
#prayer-form {
margin-bottom: 20px;
width: 960px;
height: 520px;
padding: 40px 30px;
margin-left: auto;
margin-right: auto;
}
form, fieldset, input, textarea {
margin: 0; padding: 0; border: 0; outline: none;
}
label {
float: left; clear: left; margin: 11px 20px 0 0; width: 65px;
text-align: left; font-size: 14px; color: #000000;
}
input {
width: 370px; height: 20px; padding: 5px 10px 5px 10px; margin: 0 0 23px 0;
background: #EDEDED;
border: 1px solid #808080;
font-family: sans-serif; font-size: 14px; color: #000000;
}
textarea {
width: 650px; height: 120px; padding: 10px 10px 5px 10px; margin: 0 0 20px 0;
background: #EDEDED;
border: 1px solid #808080;
overflow: auto;
font-family: sans-serif; font-size: 14px; color: #000000;
}
input[type=submit] {
width: 95px; height: 30px; float: left; clear: left; padding: 2px 5px 2px 5px; margin: 20px 0 0 85px;
color: #FFFFFF;
border: 1px solid #0000CD;
background: -moz-linear-gradient(top, #00BFFF 0%, #0000CD 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00BFFF), color-stop(100%,#0000FF)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00BFFF', endColorstr='#0000CD');
cursor: pointer;
}
input[type=reset] {
width: 95px; height: 30px; float: left; padding: 2px 5px 2px 5px; margin: 20px 0 0 20px;
border: 1px solid #858585;
background: -moz-linear-gradient(top, #EDEDED 0%, #999999 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EDEDED), color-stop(100%,#999999)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EDEDED', endColorstr='#999999');
cursor: pointer;
}
p captcha{
float: left; padding: 2px 0 0 85px;
font-family: sans-serif; font-size: 14px; color: #000000;
}
#captcha {
float: left; margin: 11px 0 20px 0; width: 445px; height: 110px; padding: 2px 5px 2px 85px;
}
HTML:
<!--/ Show Prayer Request Form-->
<div id="prayer-form">
<form name="prayer-form" action="send-mail.php" method="POST">
<label for="field_name">Name:</label> <input type="text" id="field_name" name="sender_name" placeholder="First Name, Last Name">
<br>
<label for="field_email">Email:</label> <input type="text" id="field_email" name="sender_email" placeholder="example#domain.com">
<br>
<label for="field_phone">Phone:</label> <input type="text" id="field_phone" name="sender_phone" placeholder="[phone]">
<br>
<label for="field_message">Prayer Request:</label>
<textarea id="field_message" name="sender_message" placeholder="How can we pray for you?"></textarea>
<p id="captcha"><b>*To submit your message, please type the words shown below:</b></p>
<div id="captcha">
<?php
require_once('recaptchalib.php');
$publickey = "*****************AzBk";
echo recaptcha_get_html($publickey);
?>
</div>
<input type="submit" name="send_message" value="Submit"> <input type="reset" value="Reset">
</form>
</div>
Your help is much appreciated.

Answer 1

You need to adjust the following rule in your style sheet:
#captcha {
float: left;
margin: 11px 0 20px 0;
width: 445px;
height: 110px;
padding: 2px 5px 2px 85px;
}
You don't need to specify the height, just use height: auto or omit it all together.
You can also omit the padding, using margin alone will give you enough control.
Finally, you may not need to float the paragraph.

Answer 2

It looks like it's the height setting in your captcha CSS:
#captcha {
float: left;
margin: 11px 0 20px 0;
width: 445px;
height: 110px;
padding: 2px 5px 2px 85px;
}
When I disable the height setting of 110px, the spacing is more reasonable.

Answer 3

I think that you have set your with the same id as the actual captcha form you must change the id on the tag, plus it is not good to have 2 ID's.
change to this -
<p id="captcha-notice"><b>*To submit your message, please type the words shown below:</b></p>
<div id="captcha">
<?php
require_once('recaptchalib.php');
$publickey = "*****************AzBk";
echo recaptcha_get_html($publickey);
?>
</div>
then add your styles
#captcha-notice{
/* styles */
}

Answer 4

Simple, change this css code:
#captcha {
float: left;
height: 110px;
margin: 11px 0 20px;
padding: 2px 5px 2px 85px;
width: 445px;
}
to
#captcha {
float: left;
/*height: 110px;
margin: 11px 0 20px;*/
padding: 2px 5px 2px 85px;
width: 445px;
}