Moving the Legend/Fieldset Down 10-15px with Padding

HTML & CSS
1

Hello everyone,

I’m working on the section layout of my site, and I want to move the sections down further, or give them vertical padding of no more than 10-15px.

I have tried to move the content down with this CSS:


fieldset{width:600px; margin-left:51px; border:2px dashed #333;}
legend{font-size:16px; font-style:italic; text-align:left; margin-left:15px;}

fieldset, legend{padding-top:10px;}

If you would like to see an example of which page I’m working on, visit http://www.atlantareviewgroup.com/health.html

2

You are using the wrong elements here. <legend> and <fieldset> are specifically designed for use in forms. Heading <h*> tags and a <div> with a border property would be a more appropriate way to achieve the result you want.

3

As TechnoBear said above fieldsets and legends are meant to group form controls and are not the right element for this job. Besides fieldsets and legends are very difficult to style cross browser so a divs border is much easier to style.

e.g.


<!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>Untitled Document</title>
<style type="text/css">
body{padding:20px 0;}
.box {
	width:400px;
	margin:auto;
	border:1px solid #000;
	padding:0 10px 10px;
}
.box h3 {
	height:1.6em;
	line-height:1.6em;
	background:#fff;
	margin:-.8em 0 0 20px;
	display:inline;
	padding:0 10px;
	float:left;
	position:relative;
}
.box p {
	clear:both;
	margin:0
}
</style>
</head>
<body>
<div class="box">
		<h3>Box Title</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</body>
</html>
4

Okay. I understand. Thanks, everyone!

5

But now I have exchanged legends with h2’s and fieldsets to divs with a class of subsectionbox. I have attempted to space the boxes out with margin-top:6px which does the job, but the top div creates a gap between the header and body graphics. Padding-top only creates space between the border and the text in the div.

6

I think I answered your question in one of your other threads.

If that doesn’t solve it then post back here.

7