Having trouble with border-spacing

1 Views

I am working on a website re vamp, and am having a little bit of trouble with spacing a group of divs. The divs are actually pretty much pertfectly spaced & positioned, the issue is that they are using the “border-spacing” property. If you look at the screeshot attached, you can see the the “border-spacing” is causing the divs to be spaced on both sides, causing them to be indented a little bit on the left and right out of line with the rest of the page (see the red block above the div’s, they are indented a little bit from the border-spacing). I tried replacing the border-spacing with margin-right, but it didn’t do anything at all. Any advice on how to just set spacing in between the divs?

enter image description here

Read More
    .community .atable {
    	display: table;
    	border-collapse: separate;
    	border: 0px;
    	padding: 0px;
    	outline: none;
    	border-spacing: 1.5em;
    	width: 100%;
    	table-layout: fixed;
    }
    .community .atable .arow {
    	display: table-row;
    }
    .community .atable .acell {
    	display: table-cell;
    	height: 100%;
    	width: 33%;
    	border-radius: 3px;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border: 1px solid #ccc;
    	background-color: #fff;
    	outline: none;
    	vertical-align: top;
    }
    
    .community .atable .acell .contentbox {
    	position: relative;
    }
    .community .atable .acell .contentbox .pad {
    	padding: 2%;
    }
    <div class="row2">
        <div class="community">
        <div class="wrap">
    
        <div class="atable">
        <div class="acell">
        <div class="contentbox">
        <a href="https://www.facebook.com/CityofNewportRI" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gov-img.jpg" alt="Facebook" /><span class="covered">Government Call-to-Action here.</span></a>
        </div>
        </div>
    
        <div class="acell">
        <div class="contentbox">
        <a href="https://www.youtube.com/channel/UCQEXfLzrNpxe7AZme3dTP0w" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/problem-img.jpg" alt="Youtube" /><span class="covered">Report a Problem.</span></a>
        </div>
        </div>
    
        <div class="acell">
        <div class="contentbox">
        <a href="<?php bloginfo('url'); ?>/projects/photos"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/howdoi-img.jpg" alt="Photo Project" /><span class="covered">How Do I ______? Call-to-Action here.</span></a>
        </div>
        </div>
    
        </div>
        </div>
        </div>
      </div>
Post Views: 1

Related posts

2 comments

  1. Instead of using display:table and border-spacing, try using display:flex and justify-content:space-between. You’ll also need to change the width of the child elements, subtracting the value you were using for the border-spacing. You may need to prefix the flexbox properties and calc value, depending on the browsers you want to support.

        .community .atable {
    	display: flex;
        justify-content:space-between;
    	border: 0px;
    	padding: 0px;
    	outline: none;
    	width: 100%;
    }
    .community .atable .arow {
    	display: table-row;
    }
    .community .atable .acell {
    	display: table-cell;
    	height: 100%;
    	width: calc(33% - 1.5em);
    	border-radius: 3px;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border: 1px solid #ccc;
    	background-color: #fff;
    	outline: none;
    	vertical-align: top;
    }
    
    .community .atable .acell .contentbox {
    	position: relative;
    }
    .community .atable .acell .contentbox .pad {
    	padding: 2%;
    }
        <div class="row2">
        <div class="community">
        <div class="wrap">
    
        <div class="atable">
        <div class="acell">
        <div class="contentbox">
        <a href="https://www.facebook.com/CityofNewportRI" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gov-img.jpg" alt="Facebook" /><span class="covered">Government Call-to-Action here.</span></a>
        </div>
        </div>
    
        <div class="acell">
        <div class="contentbox">
        <a href="https://www.youtube.com/channel/UCQEXfLzrNpxe7AZme3dTP0w" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/problem-img.jpg" alt="Youtube" /><span class="covered">Report a Problem.</span></a>
        </div>
        </div>
    
        <div class="acell">
        <div class="contentbox">
        <a href="<?php bloginfo('url'); ?>/projects/photos"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/howdoi-img.jpg" alt="Photo Project" /><span class="covered">How Do I ______? Call-to-Action here.</span></a>
        </div>
        </div>
    
        </div>
        </div>
        </div>
      </div>

  2. The simplest solution would be to apply a negative left and right margin to the display:table element, to compensate for the border-spacing applied to those sides. You’ll also need to increase the width accordingly (calc is supported in IE9 and up).

    .community .atable {
    margin-left: -1.5em;
    margin-right: -1.5em;
    width: calc(100% + 3em);

    That said, I would encourage you to practice using flexbox as the more forward-looking solution.

Comments are closed.