Hide the last bottom margin in a container

Updated . Posted . Visible to the public.

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.

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.

Henning Koch
Last edit
Keywords
css, remove
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2010-09-07 08:12)