Menu icon Foundation
How to prevent margins at the bottom of panels?

When I add buttons or a callout panel on top of a regular panel, I often end up with an extra large margin at the bottom of the panel. I know this is because the button has bottom padding plus the margin at the bottom of the panel. How can I prevent this? Is there a way I can cleanly remove this extra space without specifically removing the margin/padding for individual elements? How is this suppose to be handled through a clean foundation approach? My code for this panel is below.

Screen shot 2014 03 19 at 1.08.52 pm

<div class="panel">
    <div class="row">
        <div class="small-6 columns">
            <a href="" class="small button expand">Settings</a>
        </div>
        <div class="small-6 columns">
            <a href="" class="small button expand">Add Event</a>
        </div>
    </div>
</div>

panelpaddingmarginbutton

When I add buttons or a callout panel on top of a regular panel, I often end up with an extra large margin at the bottom of the panel. I know this is because the button has bottom padding plus the margin at the bottom of the panel. How can I prevent this? Is there a way I can cleanly remove this extra space without specifically removing the margin/padding for individual elements? How is this suppose to be handled through a clean foundation approach? My code for this panel is below.

Screen shot 2014 03 19 at 1.08.52 pm

<div class="panel">
    <div class="row">
        <div class="small-6 columns">
            <a href="" class="small button expand">Settings</a>
        </div>
        <div class="small-6 columns">
            <a href="" class="small button expand">Add Event</a>
        </div>
    </div>
</div>
Steve Trask about 5 years ago

Hey Jenny,

The cleanest way to do this will also remove the margin from the bottom of all buttons, you can do this by un-commenting line 326 in the _settings.scss file and set the margin to what you require

$button-margin-bottom: rem-calc(20);

Unfortunately if you need a unique style you need a specific selectors you could just target buttons in panels?

Also you could save a tiny a bit of code by doing it this way: http://cdpn.io/Aaptl

Hope this helps

Steve