我的列之间的白色间距无法使用CSS覆盖它，也看不到它上面的CSS显示空格

Question

I have a set of columns with some sliding i am doing between them but then when i arranged them to look like how in my fiddle i found a space between each of them

This is my fiddle , how I can get rid of this spacing to make them attached to each others?

 $(document).ready(function() { jQuery("#switcher1").click(function() { jQuery(".middle-wrap").animate({left: "0px"}); }); jQuery("#switcher2").click(function() { jQuery(".middle-wrap").animate({left: "-198.4px"}); }); jQuery("#switcher3").click(function() { jQuery(".middle-wrap").animate({left: "-396.8px"}); }); jQuery("#switcher4").click(function() { jQuery(".middle-wrap").animate({left: "-595.2px"}); }); jQuery("#switcher5").click(function() { jQuery(".middle-wrap").animate({left: "-793.6px"}); }); jQuery("#switcher6").click(function() { jQuery(".middle-wrap").animate({left: "-992px"}); }); jQuery("#switcher7").click(function() { jQuery(".middle-wrap").animate({left: "-1190.4px"}); }); jQuery("#switcher8").click(function() { jQuery(".middle-wrap").animate({left: "-1388.8px"}); }); }); 

 .outer-wrap { overflow-x: hidden; position: relative; max-width: 1050px; min-width: 1050px; margin: 0; padding: 0; height: 450px; background-color: #fff; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #e3e3e3; display: inline-block; background-color: #fff; border-top: 1px solid #e3e3e3; transition: all 50ms ease-in-out; } .middle-wrap { position: relative; max-width: 1890px; left: 0px; margin: 0; padding: 0; height: 450px; min-width: 1890px; } .inner-wrap { display: inline-block; max-width: 210px; min-width: 210px; border-right: 1px solid #e3e3e3; vertical-align: top; border: none; margin: 0; padding: 0; height: 100%; /* float: left;*/ } .year_list { background-color: darksalmon; } .make_list { background-color: red; } .model_list { background-color: aquamarine; } .body_style { background-color: blue; } .transmission { background-color:darkviolet; } .options { background-color: darkslategray; } .aftermarket_modifications { background-color: darkseagreen; } .mileage { background-color: darkred; } .license_plate { background-color: darkorange; } 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <div id="switcher1">See Part 1</div> <div id="switcher2">See Part 2</div> <div id="switcher3">See Part 3</div> <div id="switcher4">See Part 4</div> <div id="switcher5">See Part 5</div> <div id="switcher6">See Part 6</div> <div id="switcher7">See Part 7</div> <div id="switcher8">See Part 8</div> <div class="outer-wrap"> <div class="middle-wrap"> <div class="inner-wrap year_list"></div> <div class="inner-wrap make_list"></div> <div class="inner-wrap model_list"></div> <div class="inner-wrap body_style"></div> <div class="inner-wrap transmission"></div> <div class="inner-wrap options"></div> <div class="inner-wrap aftermarket_modifications"></div> <div class="inner-wrap mileage"></div> </div> </div> 

Answer 1

Due to your display: inline-blocks , the white spaces appear in between your block elements.

There are many resolutions to the same, refer to David Walsh's blog

What I would prefer to do here is use float instead of display: inline-block .

Check updated fiddle: https://jsfiddle.net/b6fw4u0z/2/

Answer 2

Uncomment float: left in .inner-wrap styling

jsfiddle

Answer 3

If you have to use display: inline-block then to remove the white space between elements, you can set

font-size: 0 

to them.

See updated fiddle: https://jsfiddle.net/b6fw4u0z/3/

You will notice i just put it on all the nested divs.