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.

Profile picture of Henning Koch
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)