Question

I created an HTML form that incorporates a CSS list. However, I would like to add 10 pixels or so after the “Last Name” field and after the “Confirmation” field of the below HTML form. Is this possible?

<form>
<ul>
<li><label for="firstName">First Name:</label></li>
<li><input type="text" name="firstName" size="35" id="firstName"/></li>
<li><label for="lastName">Last Name:</label></li>
<li><input type="text" name="lastName" size="35" id="lastName"/></li>

<li><label for="passid">Password:</label></li>
<li><input type="password" name="password" size="35" id="password"/></li>
<li><label for="confirmation">Confirmation:</label></li>
<li><input type="password" name="confirmation" size="35"id="confirmation"/></li>

<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="35" id="email"/></li>
</ul>
</form>

I made several CSS and HTML modifications, like the following, which had no effect:

form ul li.extra
{
    margin-bottom:15px;
}

<li class="extra"><label for="lastName">Last Name:</label></li>
<li class="extra"><input type="text" name="lastName" size="35" id="lastName"/></li>

I’ve also tried simpler things, like HTML line breaks, but none had any effect on the layout of my page.

Is is possible to adjust the margin-bottom property of an individual list item?

Thank you!

Answer 1

It’s not ideal, but a quick way is to set the inline style of the LI you’re interested in:

<li style="margin-bottom: 15px;">Whatever</li>

But a better way would be to add the class, which is obviously easier to apply to other individual LI tags:

li.single_li {
    margin-bottom: 15px;
}

<li class="single_li">Whatever</li>

If it’s not working, it could be being overridden by a parent class / style, try the following in your css / style:

CSS

li.single_li {
    margin-bottom: 15px !important;
}

Inline

<li style="margin-bottom: 15px !important;">Whatever</li>

The addition of !important makes sure it gets applied and not overwritten by a parent class.

Added jsFiddle example of inline style