CODEWITHSUNDEEP
css
Val M
Val M

Reputation: 929

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

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?

Upvotes: 0

Views: 2946

Answers (3)

chopsticks
chopsticks

Reputation: 11

Use display: inline-block;

Upvotes: 1

Tomas
Tomas

Reputation: 5143

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; }

Upvotes: 0

Seth Petry-Johnson
Seth Petry-Johnson

Reputation: 12085

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.

Upvotes: 0

Related Questions