CSS to handle row spacing

I am trying to use CSS to a) get the field captions vertically closer to the corresponding form fields, and b) try to put more vertical space between table rows.   Without altering any of the existing HTML, how can I do this?  I've tried margin, border, line-height, padding, etc--in multiple combinations, but can't seem to get it to work correctly.
<html>
<head>
<style>
 
.CONTENT{
	color:#003B71;
	font-family: Georgia, Arial, Helvetica, sans-serif;
	font-size:12px;
}
 
.VIEWBOXCAPTION{
	font-family: Arial, sans-serif;
	font-size: 12px;
	color:#003B71;
	font-weight: 900;
	height:50%;
	padding-bottom:10px;
}
 
.EDIT{
	background:#F7F7F7 ;
	font-weight:normal;
	color:#003B71;
	font-family: Helvetica, sans-serif;
	font-size:11px;
	width: 200px;
}
 
</style>
</head>
 
<body>
 
<table CLASS=CONTENT>
 
	<tr><td valign=top>
			<SPAN class=VIEWBOXCAPTION>capt 1</span><br>
			<SPAN class=VIEWBOXCAPTION ><input type=text class=edit></span>
		</td>
		<td  valign=top>
			<SPAN class=VIEWBOXCAPTION>capt 2</span><br>
			<SPAN class=VIEWBOXCAPTION ><input type=text class=edit></SPAN>
		</td>
		</tr>
	<tr><td  valign=top>
			<SPAN class=VIEWBOXCAPTION>capt 1</span><br>
			<SPAN class=VIEWBOXCAPTION ><input type=text class=edit></span>
		</td>
		<td  valign=top>
			<SPAN class=VIEWBOXCAPTION>capt 2</span><br>
			<SPAN class=VIEWBOXCAPTION ><input type=text class=edit></SPAN>
		</td>
		</tr>
</table>
 
</body>
</html>

Open in new window

saturationAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

erikTsomikSystem Architect, CF programmer Commented:
try this
<html>
<head>
<style>
 
.CONTENT{
        color:#003B71;
        font-family: Georgia, Arial, Helvetica, sans-serif;
        font-size:12px;
}
 
.VIEWBOXCAPTION{
        font-family: Arial, sans-serif;
        font-size: 12px;
        color:#003B71;
        font-weight: 900;
       
        padding-bottom:10px;
}
 
.EDIT{
        background:#F7F7F7 ;
        font-weight:normal;
        color:#003B71;
        font-family: Helvetica, sans-serif;
        font-size:11px;
        width: 200px;
}
 
</style>
</head>
 
<body>
 
<table CLASS="CONTENT">
 
        <tr>
                              <td valign="top">
                        <span class="VIEWBOXCAPTION">capt 1</span><br>
                        <span class=VIEWBOXCAPTION><input type=text class="edit"></span>
                </td>
                <td  valign=top>
                        <SPAN class=VIEWBOXCAPTION>capt 2</span><br>
                        <SPAN class=VIEWBOXCAPTION ><input type=text class=edit></SPAN>
                </td>
                </tr>
        <tr><td  valign=top>
                        <SPAN class=VIEWBOXCAPTION>capt 1</span><br>
                        <SPAN class=VIEWBOXCAPTION ><input type=text class=edit></span>
                </td>
                <td  valign=top>
                        <SPAN class=VIEWBOXCAPTION>capt 2</span><br>
                        <SPAN class=VIEWBOXCAPTION ><input type=text class=edit></SPAN>
                </td>
                </tr>
</table>
 
</body>
</html>
0
erikTsomikSystem Architect, CF programmer Commented:
as for verical spacing I would just put a blank row
<tr><td></td></tr>
0
saturationAuthor Commented:
Hi, the first part worked, but as I mentioned in my description above, I don't have direct control over the HTML--only the CSS--so I have to adjust the row height through CSS.   How do I do this?
0
toymachiner62Commented:
Try this for the second part:

tr {
    padding:10px 0 10px o;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
saturationAuthor Commented:
It's still rendering the same as without the TR style...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.