Remove Margins for First/Last Elements

It can sometimes be desirable to remove the top or left margin from the first element in a container. Likewise, the right or bottom margin from the last element in a container. You can do this by manually applying classes to the HTML:

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

The "top"/"bottom" zeroing being useful with a vertical stack of elements, "left"/"right" zeroing being useful for horizontal rows (in general). But... this method is dependent on you adding classes to the HTML yourself. Pseudo-selectors can be a better less intrusive way to go:

* > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
* > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }

You may want to replace the * with more specific selectors as per your needs.

"Every Third", etc.

Lets say you had a floated block of 9 elements, 3 by 3. It's very common that you might need to remove the right margin from the 3rd, 6th, and 9th items. The nth-child pseudo-selector might be able to help there:

* > :nth-child(3n+3) { margin-right: 0; }

The equation there, 3n+3, works like this:

(3x0)+3 = 3
(3x1)+3 = 6
(3x2)+3 = 9


jQuery uses CSS3 selectors, which includes :first-child, :last-child, and :nth-child(). This means that in browsers with don't or don't fully support these selectors, they WILL work in jQuery, so you can substitute the CSS support with JavaScript support. For example:

$("* > :nth-child(3n+3)").css("margin-right", 0);

Browser support

:first-child and :last-child works in the latest release from all major browsers, but not in IE 6. :first-child is supported in IE 7+. :nth-child works in Safari 3+, Firefox 3.5+, and Chrome 1+, but still doesn't work in IE8.

Also see David Oliver's article.


  1. User Avatar
    Permalink to comment#

    And what about non-JS browser? You are giving JS the responsibility of CSS, which I think, is as bad as embedding it on HTML.

    A cool trick anyway, but non-suitable for work. In my personal projects I will use it.

  2. User Avatar
    Permalink to comment#

    JQuery is the best option.
    It works on every browser.

    Thanks Chris for the tip.

  3. User Avatar
    Permalink to comment#

    hello chris

    Thank you so much jQuery work is good i like your bolg it’s very helpful to me for css and jQuery

    thank you so much again

  4. User Avatar
    Permalink to comment#

    I’m not sure why it’s

    "* > :first-child"

    rather than


    Because when I use

    H1 > :first-child

    it doesn’t match what I think it will (the first H1 in a div). But when I use


    it works.


    • User Avatar
      Dark Phoenix
      Permalink to comment#

      H1 > :first-child
      means “Find me all elements that are the first child of an H1 element”.
      means “Find me all H1 elements that are the first children of any container element”.

      There’s a subtle difference between them. First child fools a lot of people this way (I know I found it somewhat confusing for a while when I first started with it), but it makes sense if you think about it hard enough.

      In fact, if there’s an element above the H1 in your DIV, H1:first-child won’t work either. In that cause, you need H1:first-of-type.

  5. User Avatar
    Jeff Sturgis
    Permalink to comment#

    the > selector is the child selector. It will match all direct descendants of the preceding selector.

    There is a good explanation here:

  6. User Avatar
    Permalink to comment#

    I have to say thank you very much as this helped me a lot!!! I wanted to use it on borders instead of margins and it worked perfectly.

  7. User Avatar

    I have to say that giving the advice of using jQuery without even mentioning the drawbacks is pretty counterproductive as it implies that all problems can be solved with jQuery. This is just promoting bad practice since many people tend to not even care to do things right in the first place, they just “fix” things with jQuery – good bye progressive enhancement.

    Through my long time activity as moderator on I’ve seen many people that don’t even fully understand what jQuery actually is (because it makes all things JavaScript so simple that even the most ignorant people can use it — and many use that 32KB library for even the smallest things that could be written with one or two lines of regular JS) and by confronting them with uncommented (in terms of education) snippets of jQuery code to solve cross-browser issues they don’t learn it after all (as we can see with two comments above).

  8. User Avatar
    Permalink to comment#

    Maybe I’m just reading it incorrectly, but the Browser Support section seems to be wrong.

    :first-child and :last-child works in the latest release from all major browsers, but not in IE 6. :first-child is supported in IE 7+. :nth-child works in Safari 3+, Firefox 3.5+, and Chrome 1+, but still doesn't work in IE8.

    I read that as ‘:last-child’ works in all major browsers except IE6, including IE7 and IE8. I’m not sure about IE7, but my experience is that IE8 does not support ‘:last-child’.

  9. User Avatar
    Permalink to comment#

    This simple formula saved my day! For displaying portfolio items in two or three rows I badly need to remove margin from last element. This formula simply does the trick! Kudos.

  10. User Avatar
    Permalink to comment#

    Thank you! Exactly what I needed.

  11. User Avatar
    Scott Richardson
    Permalink to comment#

    Hey folks, I thought I would share a method that gets around the need to remove any margin that I have been using for many years.

    So, all your floated blocks/divs/items go inside a container div that has additional width assigned to it so it can contain the overflowing margin of the last item in each row, and then use negative margin-right to bring that container’s width back in within your overall site width, all without pushing the last item of the row into the next row.

    See here:

    • User Avatar
      Permalink to comment#

      Thank you very much for this answer. I could not find another solution to my problem, except yours.
      GOD bless you and keep you :).

  12. User Avatar
    Permalink to comment#

    I had to use “> *:first-child” to get it to work.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.