Wolf X Machina

Back to blog

Remove bottom margin from last child element dynamically

Posted in How To on October 22, 2019

Consistent and equal spacing and alignment is really important for the User Interface. And so is making sure people who edit the websites you work on can update content without worrying about layout and design. It can sometimes be tricky to let content editors put in anything they want and to maintain the correct spacing when you're dealing with multiple elements.

So I came up with a really simple CSS class that I can stick anywhere in a HTML template/skin/theme to help keep the spacing consistent. Take a look at the following image:

Using flexbox in CSS, I've dynamically aligned the right column content with the image on the left hand side. Probably like your CSS, my headings and paragraphs have bottom margins by default. So if my text's last paragraph has a bottom margin, the whole right column will look slightly misaligned to the left column's image because the bottom paragraph's margin is pushing down.

Instead of trying to create custom CSS classes for every situation, or relying on my content editors to edit the HTML source, I made this super simple CSS class which I apply to all nearly all of my templates.

.mb-lc-0 > :last-child {
    margin-bottom: 0 !important;
}

I followed the Bootstrap naming convention for margin-bottom. So my class is basically shorthand for "margin-bottom-last-child-0". This bit of CSS, when applied to a parent element, finds the last child of the immediate children and makes the bottom margin 0 pixels.

To use this code, simply copy it to your CSS file. Then add the class .mb-lc-0 to any parent element where you want the last element to not have a bottom margin. You might use it in the following way:

<section class="hero">
  <div class="mb-lc-0">
    <h1>About Us</h1>
    <p>Sit amet porttitor eget dolor morbi non arcu risus. Sem integer vitae justo eget. Mauris sit amet massa vitae tortor condimentum. Blandit turpis cursus in hac. Volutpat odio facilisis mauris sit amet massa vitae tortor. Amet nisl purus in mollis nunc sed id. Sit amet volutpat consequat mauris nunc congue nisi. Aenean pharetra magna ac placerat. Netus et malesuada fames ac turpis egestas sed. Euismod lacinia at quis risus sed vulputate.</p>
    <p>Arcu dictum varius duis at consectetur lorem donec massa sapien. Egestas erat imperdiet sed euismod. Augue ut lectus arcu bibendum at varius vel. Sem et tortor consequat id porta nibh venenatis cras sed. Neque volutpat ac tincidunt vitae semper quis lectus. Aenean et tortor at risus viverra adipiscing at.</p>
    <p><a href="#link">Learn More</a></p>
  </div>
</section>

In this example, the last paragraph with the Learn More button would be targeted and it would make the bottom margin 0. You'll be surprised at how often you might use this because it can apply to almost countless designs on UI elements like heroes, call to actions, staff bios, navigation, blog posts - virtually everything.

Hope that's insightful! I come up with a lot of things like this to make websites easier to manage. If you're looking for someone to help you on the User Interface of your website, check out https://wolfxmachina.com/ui-design-and-development-for-programmers

Aaron Lopez

Aaron Lopez

Founder & Lead Developer at Wolf X Machina

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

Learn More