Menu icon Foundation
Vertical Button Spacing

I have four buttons (small) that I am trying to make appear closer. I enclosed in a paragraph and that helped some, but not enough. I tried adding line-height to the paragraph and that helped a little but still not enough. I tried using a button group - but I don't think I am understanding quite how that concept should work. It added lines in front of the text but didn't space them any different. I tried a list but that created the dots in front of each button. I'm sure there is an easy way to do this and I'm just too green to get it. I've searched through the forum for vertical spacing buttons but nothing. I'm going to keep researching/trying things but if someone spots this and knows immediately what I'm missing I will be super grateful for your input!

Thanks!!

        <div class="panel">
             <h4>Resources</h4>
    		  <p><a href="javascript:OpenWindow('/docs/laborTab/ourPeople/secure/pilot/documents/pilotsScorecard.pdf')" class="small button">Negotiation Scorecard</a><br/>
              <a href="javascript:OpenWindow('/docs/laborTab/ourPeople/secure/pilot/documents/Collective_Bargaining_Process_vPilots.pdf')" class="small button">Collective Bargaining Process</a><br/>
              <a href="javascript:OpenWindow('/docs/laborTab/ourPeople/secure/pilot/documents/pilotsContract.pdf')" class="small button">Contract</a><br/>
              <a href="javascript:OpenWindow('/docs/laborTab/ourPeople/secure/pilot/documents/NMBTimelinePilots.pdf')" class="small button">NMB Timeline</a><br/><p>
        </div>

            

         

Buttonlayout

vertical spacing buttons

I have four buttons (small) that I am trying to make appear closer. I enclosed in a paragraph and that helped some, but not enough. I tried adding line-height to the paragraph and that helped a little but still not enough. I tried using a button group - but I don't think I am understanding quite how that concept should work. It added lines in front of the text but didn't space them any different. I tried a list but that created the dots in front of each button. I'm sure there is an easy way to do this and I'm just too green to get it. I've searched through the forum for vertical spacing buttons but nothing. I'm going to keep researching/trying things but if someone spots this and knows immediately what I'm missing I will be super grateful for your input!

Thanks!!

        <div class="panel">
             <h4>Resources</h4>
    		  <p><a href="javascript:OpenWindow('/docs/laborTab/ourPeople/secure/pilot/documents/pilotsScorecard.pdf')" class="small button">Negotiation Scorecard</a><br/>
              <a href="javascript:OpenWindow('/docs/laborTab/ourPeople/secure/pilot/documents/Collective_Bargaining_Process_vPilots.pdf')" class="small button">Collective Bargaining Process</a><br/>
              <a href="javascript:OpenWindow('/docs/laborTab/ourPeople/secure/pilot/documents/pilotsContract.pdf')" class="small button">Contract</a><br/>
              <a href="javascript:OpenWindow('/docs/laborTab/ourPeople/secure/pilot/documents/NMBTimelinePilots.pdf')" class="small button">NMB Timeline</a><br/><p>
        </div>

            

         

Buttonlayout
FoundationDeck over 4 years ago

Here is a simple fix

http://codepen.io/foundationdeck/pen/qdjRER

I just altered the margin-bottom using css for each buttons. There are other ways of this as well. You can vary the margin button to your liking.

Tim Hartwick over 4 years ago

Hi Sherry,

You can definitely change change this spacing. Foundation uses "bottom-margin" to control this. You can either write a custom rule to override the default margin for buttons, see: http://codepen.io/tim_hartwick/pen/VLWPjM.

You have to be careful with this method because it can become unorganized and hard to track later on in larger projects. The preferred way of doing this is to adjust the value in the settings file if you are using the scss version. I believe it is on line 448. See:

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

Sherry Bradford over 4 years ago

You all ROCK! That fixed it immediately! I changed at the css level and documented my code so I would understand the behavior if I suddenly needed them to have a wider spacing. Thank you so much! I'm fortunate that this particular project is using this set of small buttons for the same thing across multiple pages so this was a perfect fix!