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 online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)