I've been beating myself up for a long time.

I have a two px border left and right on a paragraph box and want to put two buttons below that - so have tried a number of ways using a container to then put a button in that - but then a I get a spacing gap below

If I simply put a content button in a column blow then I'm unable to add a border to that column.

If the attached approximates the intended layout, it may help. It was achieved as follows.

Three rows were created
1. One column
2. Two columns
3. One column

The bordered paragraphs were put in items 1 and 3 above.

A container was put in each of the columns in item 2 above, having the classes of 'left' and 'right' respectively. The 'left' one was given a border:left, and the 'right' one was given a border:right'.

Those 'left' and 'right' containers each contain a button floated 'center'.

Frank

Your gap comes from default margins. Reset them and wrap buttons in a container:

p, button { margin: 0; }

.box {
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 10px;
}

.buttons {
display: flex;
gap: 10px;
margin-top: 10px;
}


This keeps text and buttons aligned inside the bordered box.

Hi Gavin,

You can achieve this without extra containers:

<div style="border-left:2px solid #000; border-right:2px solid #000; padding:20px; text-align:center;">
<p>Your text here</p>
<button style="display:block; width:100%; margin-top:10px;">Button 1</button>
<button style="display:block; width:100%; margin-top:10px;">Button 2</button>
</div>


Key points:

Apply the left/right borders to the parent <div> that wraps the text and buttons.

Use padding inside the div to give space for the content.

Set the buttons to display:block; width:100%; to align and remove extra gaps.

Use margin-top on buttons instead of adding extra containers—this avoids the unwanted gap.

This keeps the border continuous and avoids spacing issues below the buttons.

Hey Gavin,

I totally get what you mean — that little spacing gap can be super frustrating in editors like this. One quick workaround you can try is:

Instead of adding borders directly to the button, wrap the button inside a single-column container.

Apply your 2px left and right borders to that container (not the paragraph or button itself).

Then, in the container’s padding settings, set “padding-bottom: 0” or reduce it manually to eliminate the gap.

Finally, center the button with vertical alignment or add a slight negative margin if the editor allows it.

That usually keeps your layout tight and keeps the button perfectly inside the bordered box without that unwanted gap.

Hope that helps a bit!

Hi Gavin,
You can add borders to your button area by wrapping the buttons in a container (or div) and styling that container instead of the button itself. For example, in your email or web layout, try:

<div style="border-left:2px solid #000; border-right:2px solid #000; padding:10px 0; text-align:center;">
<a href="#" style="display:inline-block; background:#0073e6; color:#fff; padding:10px 20px; text-decoration:none; border-radius:4px;">Button 1</a>
<a href="#" style="display:inline-block; background:#0073e6; color:#fff; padding:10px 20px; text-decoration:none; border-radius:4px;">Button 2</a>
</div>


This gives you the same side borders as your paragraph box and keeps the spacing consistent.

If you’re using an email builder, look for the “HTML block” or “container style” option — apply the borders there instead of directly on the button column to avoid the extra gap.