Code Snippet

Home » Code Snippets » CSS » Remove Margins for First/Last Elements

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
etc.

jQuery

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.

Subscribe to The Thread

  1. JMLeon

    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.

    Reply ↓
  2. Mauricio

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

    Thanks Chris for the tip.

    Reply ↓
  3. chirag

    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

    Reply ↓
  4. Peter

    I’m not sure why it’s 

    "* > :first-child"

    rather than 

    "*:first-child"

    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 

    H1:first-child

    it works.

    Thoughts?

    Reply ↓
  5. Jeff Sturgis

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

    There is a good explanation here:
    http://meyerweb.com/eric/articles/webrev/200006b.html

    Reply ↓
  6. Will

    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.

    Reply ↓
  7. VIPStephan

    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 CodingForums.com 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).

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~