Read more

Hide the last bottom margin in a container

Henning Koch
September 07, 2010Software engineer at makandra GmbH

When you create e.g. a sidebar box that contains headlines and paragraphs, the final paragraph's margin in that box will create an undesired 'bottom padding' inside that box.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

Here is a Sass mixin that you can apply to such boxes. It makes the last child's bottom margin disappear:

=hide_last_margin
  >*:last-child
    margin-bottom: 0

Use it like this:

.sidebar_box
  p, table, ul
    margin-bottom: 1em
  +hide_last_margin

Internet Explorer (fix)

Does not work in versions of <IE8

Your best bet is to explicitly add a last-child (or similar) class to that item, and apply your style to the .last_child class.

Posted by Henning Koch to makandra dev (2010-09-07 10:12)