Search code examples
jquerycsscentering

append a space with jquery to inline anchor tags if there are more than one

I have a wordpress foreach loop that will list categories as anchors for posts I create. They are listed inline and I would like to add a space between them if there are more than one listed. I tried to add a right margin on them but it messes up the centering. 

<div class="catBoxBig">
 <?php   $exclude = array("Archive");
    $categories = get_the_category();   
foreach ( $categories as $category ) {
    if (!in_array($category->cat_name, $exclude)) {
        echo '<div class="catBox"><a class="catName" href="'.esc_url( get_category_link( $category->term_id ) ).'">'.esc_html( $category->cat_name ).'</a></div>';
    }
} ?>
</div>

my css for centering:

.catBigBox {text-align:center;}
.catBox {display:inline;}
Solution

  • you can add margin as follow: 

        .catBox{
      display: inline-block;
      margin: 0 5px;
    }

    this will add margin of 5px to left and right of each element with class .catBox