Child div with border within parent div with border, gap on right edge

2 comments

1. Even if you get rid of the gap, you’ll still have a double border so you also need to get rid of one of the borders. You can hide the border on the last li with this:

   li.ui-state-default.ui-corner-top:last-child {
     border-right: none;
   }
   

   But you may still have a gap in the bottom border.

   Without seeing the rest of your styling, it’s hard to say for sure, but often these unwanted gaps are caused by whitespace in the HTML. This seems counter-intuitive because usually whitespace doesn’t matter, but between images and inline block elements it often introduces unwanted gaps.

   Unfortunately (to my knowledge) there isn’t an elegant solution to this issue. There are hacky solutions using CSS (e.g. set the font-size to zero for the parent element and set an explicit font size for your li elements), but the easiest is to just remove the whitespace between the </li> and the </ul>. See https://css-tricks.com/fighting-the-space-between-inline-block-elements/ for more suggestions.

   Run the snippet below for a demonstration – I’ve replaced the whitespace (including newline) with a comment, which is fine as long as there’s no whitespace around the comment.

   /* hide the border on the last li */
   li.ui-state-default.ui-corner-top:last-child {
     border-right: none;
   }
   
   /* original CSS from the question - no changes here */
   li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
         background-color: #a0a3a2;
         border-top-right-radius: 5px;
       }
       li.ui-state-default.ui-corner-top {
         width: 33.3334%;
         border-right: 2px solid #a0a3a2;
         border-bottom: 2px solid #a0a3a2;
         border-top-right-radius: 5px;
       }
       #ui-id-3.ui-tabs-anchor {
         width: 33.3334%;
         border-top-right-radius: 0px!important;
       }
       .woocommerce-tabs {
         margin-bottom: 20px;
         border: 2px solid #adb0b2;
         border-radius: 5px;
         background-color: #ffffff;
         padding: 5px;
       }
   
   /* not part of answer - just here to make the snippet more closely
      match the image in the question */
   ul {
     width: 100px;
     border-right: 2px solid red;
     border-top-right-radius: 5px;
   }
   li {
     box-sizing: border-box;
     display:inline-block;
   }

   <div class="wpb_tabs wpb_content_element" data-interval="0">
     <div class="wpb_wrapper wpb_tour_tabs_wrapper ui-tabs vc_clearfix ui-widget ui-widget-content ui-corner-all">
       <ul class="wpb_tabs_nav ui-tabs-nav vc_clearfix ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
         <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-6f4746f8-2705-5" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
           <a href="#tab-6f4746f8-2705-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">PR</a>
         </li><li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-42783517-3ace-8" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
           <a href="#tab-42783517-3ace-8" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">DE</a>
         </li><li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-1429777272805-2-1" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
           <a href="#tab-1429777272805-2-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">RE</a>
         </li><!-- you can have a comment here, just no whitespace--></ul>
     </div>
   </div>

   Log in to Reply

2. Using CSS3 box-sizing property will solve your problem.

   CSS

   div.container {
       border: 2px solid #888;
       border-radius: 5px;
       overflow: hidden;
   }
   ul.tab {
       padding: 0;
       margin: 0;
   }
   ul.tab > li {
       background-color: #f0f0f0;
       border-right: 2px solid #888;
       border-bottom: 2px solid #888;
       border-top-right-radius: 5px;
       color: #888;
       list-style: none;
       padding: 10px;
       float: left;
       width: 33.3334%;
       box-sizing: border-box;
   }
   ul.tab > li:last-child {
       border-right: none;
   }
   ul.tab > li.active {
       background-color: #888;
       color: #fff;
   }
   

   HTML

   <div class="container">
   <ul class="tab">
   <li class="active">PRODUCT DETAILS</li>
   <li>DELIVERY DETAILS</li>
   <li>REVIEWS</li>
   </ul>
   <br><br><br><br><br><br>
   </div>
   

   JSFIDDLE: http://jsfiddle.net/yd6ao3d4/

   Log in to Reply