How can I set the size of the gap between inline elements in CSS?

Question

I am creating an MVC 1.0 form to use in multiple views. I have some elements that need to be shown on the same line, and I have done this by setting the display to "display: inline" for the style. I have also added the margin-left setting to the CSS in order to force the gap between the inline elements but this doesn't appear to be being set.

My CSS has:

fieldset label.inline { display: inline; margin-left: 2em; }

The view code is:

<fieldset>
    <legend>Details</legend>
    <p>
        <label for="StartTime">Start Time:</label>
        <%= Html.TextBox("StartTime", Model.StartTime.ToShortTimeString())%>
        <label for="NextDay" class="inline">Next Day?</label>
        <%= Html.CheckBox("NextDay") %>
        <%= Html.ValidationMessage("StartTime", "*")%>
    </p>
</fieldset>

Setting the size in the "margin-left" style has no impact on the space between the StartTime control and the NextDay label. How can I create this gap between the elements?

Answer 1

What browser are you testing in?

If you're using Firefox, use the Firebug extension. Use the pointer tool to select one of your elements, and then use the Layout tab to look at the box model. That will show you the padding, border and margins that are being applied. If you post the HTML being generated and the box model properties that are being calculated you might get better answers.

Answer 2

Just use padding insted of margin. Padding left and right will work. Padding top and bottom won't since it is an inline element (would work on inline block). You can set line-height to adjust the top and bottom margin.

Answer 3

The "margin" style works different for inline elements. You can use the "inline-block" display-mode:

fieldset label.inline { display: inline-block; margin-left: 2em; }

Answer 4

Use display: inline-block;