Remove margin in last child

html css margin padding

13,801

Solution 1

Try this:-

.last { margin-bottom: 0 !important; margin-right: 0 !important; }

Solution 2

There is no need to add a class "last" the best practice to do this and not write a lot of code would be:

#pages li:last-child{
    margin-right: 0px;
}

This way, you don't have to create any class last or anything. The css will look in the id pages, the last li (last-child) and will make it with margin-right of 0.

Solution 3

You can use :not(:last-child) to exclude the last child. So, for your example, you would have:

nav#pages ul :not(:last-child) {
    margin-right: 5px;
}

This will apply a margin-right: 5px to all but the last <li> ... </li>.

Checkout the jsfiddle example.

Solution 4

In your example it is the li that has the right margin but you have applied the class to the anchor link.

Your exiting CSS will work if you change the HTML to

<li class="last"><a href="#">Contact</a></li>

Solution 5

neat thing, give it a go, avoids using :last-child etc..

li + li {
  margin-top: 8px;
}

View more solutions

13,801

Author by

Hung PD

Welcome to my personal blog: enter link description here

Updated on June 04, 2022

Comments

Hung PD about 2 years

My code here:

HTML

<nav id="pages">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>
</nav>  <!-- end pages -->

CSS

#pages{
    position: absolute;
    right: 0;
    top: 70px;

    ul li{
        float: left;
        margin-right: 5px;

        a{
            color: @link-color;
            display: block;
            padding: 0 10px;
            border-radius: 5px;
            font-weight: bold;
        }
    }
}

.last{
    margin-right: 0;
}

I add class "last" to last child to remove margin but not effected. I don't use :last-child because it will not with IE6 or IE7. Hope someone help?

Hung PD almost 11 years

i remember some author not use !important method
Rahul Tripathi almost 11 years

@user2494232:- Did you gave that a try??
Paulie_D almost 11 years

For improved support (IE8) try margin-left instead of margin-right which can then be removed with `li:first-child. Codepen Example
insertusernamehere almost 11 years

Actually this should do the trick too. But please don't encourage people to use !important, see: What are the implications of using “!important” in CSS?
Dawson almost 11 years

!important is useful. It shouldn't be your "I'm lazy, and am not going to fix my specificity problems" tool, but to discount its validity is wrong. Guns don't kill. People kill, brah
Dawson almost 11 years

Using :first-child is not only a cleaner approach, but is backward compatible at least to IE7. Throwing "last" on the last kid is absolutely NOT needed.
Ritesh Jagga almost 4 years

This is an amazing answer because it gives a different way to solve hanging margins at the top or bottom of a container having rows of items. We can understand like this "Whoever is added next to me, should place itself from a margin which means one can use margin-top only or margin-left if layout is on the same line. margin-bottom and margin-right leads to an unbalanced container with hanging margins. Thank you so much!
Joseph118 almost 4 years

last-child works, however, this fails when there is an after pseudo-element. To overcome this, the next sibling selector would be the ideal pick