Modify The Gap Between Two Divs

I just noticed this amazing article on items slider Article from codrops: The demo is available here Demo of the article 'How to Create a Simple Multi-Item Slider' I Would like to

Solution 1:

As promised in my other thread, here is my help with your issue.

The problematic code (seen below) is actually a hack/fix to force the browser to use the old border-box mode instead of the default content-box.

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

What is the difference between the two modes? In the border-box mode, the width/height of the element combines the width/height of the content, padding, and borders. In the content-box mode, the width/height of the element is regarding only it's content. Source: developer.mozilla.org.

In short, you can safely remove the problematic CSS block. However, this will result in some items getting bigger.

In order to gain the same look, you must seek out all blocks of CSS code that set width or heightalong withpadding or border. In these cases, simply add the following lines to the block:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

But, upon further inspection, I have found that the demo.css is only used for the demonstration and can be removed completely. All you need for the multi-item slider is specified in the style.css.

Solution 2:

Basically, the asterisk is causing the CSS to be applied to everything on your website. You can fix the problem by a bit of trial and error. Just swap the asterisks with the classes that seem to be applicable. Just from looking at the code, it seems to be .mi-slider, however there could be a few additional classes as well. You only have a handful of classes, so it shouldn't take too long to figure out exactly which ones to use.

.mi-slider,
.mi-slider:after,
.mi-slider:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}