Better way to control spacing between block elements?

Question

Hi there,

Is there a better way to control the space between certain block elements.. i basically have a few of these.

<div id="head1" class="global-box">
    <p>My Header Name</p>
    <select id="Select1">
         <option></option>
    </select>
</div>

problem is that the space between the My Header Name and the select html element is larger than i want... I tried removing the <p> but then its in line and select is on same line as the header title..

I could use <br/> but this just creates a block ?

Answer 1

Try <select style='margin-top: 0px; padding-top: 0px;'>

Answer 2

In your CSS

.global-box p {
    margin-bottom: 2px;
}

.global-box select {
    margin-top: 2px;
}

You probably only need one of these, but it's difficult to know which.

Answer 3

If you want to do this for just this <p>:

#head1 > p { margin-bottom: 0px; }

Otherwise, if you want to do this for all class="global-box" elements:

.global-box > p { margin-bottom: 0px; }

Note that if this doesn't give you enough room before the select, you can increase the margin-bottom amount.

Answer 4

The visible space between elements is generally going to be either

• padding
• margin

So if you want less space, change your header line to

<p style="margin: 0px; padding: 0px">My Header Name</p>

and play with it.

Answer 5

First check into using a global reset style sheet (see Resetting Again by Meyer or the YUI Reset)

This will remove all the margin assignments in all browsers to ensure consistency.

Then use this in your CSS style:

div.global-box p.header { margin: 0 0 5px 0; }

Where 5px is the bottom margin (top right bottom left), so you can make it whatever you want.