CSS Margin Collision

CSS - Margin collision between 2 DIVs

As others have already said, this is known as collapsing margins:

8 Box model - 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

In this case, they are sibling elements; therefore the following applies:

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

Floating one of the sibling elements would prevent the margins from collapsing:

EXAMPLE HERE

<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; float:left;">collapsing</div>

Margins of inline-block boxes do not collapse (not even with their in-flow children).

Making an element inline-block would also prevent the margins from collapsing:

EXAMPLE HERE

<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; display:inline-block;">collapsing</div>

Assuming the elements weren't siblings, you could add overflow:hidden to the parent element, as the following would then apply:

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

css margin collision

You do not need to do anything; by the box model specs, adjacent bottom and top margins will collapse, so you get a 10-pixel gap between your two <div> elements as opposed to a 20-pixel gap. See this jsFiddle preview.

EDIT: the reason why you're not seeing a collapse between a <table> ad a <div> is because a table is set to display: table by default, which is not exactly the same as a block-level element, so by the specs the margins will not collapse.

How to disable margin-collapsing?

There are two main types of margin collapse:

Collapsing margins between adjacent elements
Collapsing margins between parent and child elements

Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and overflow: hidden will have the same effect. Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height.

Other properties that, once applied to the parent, can help fix this behaviour are:

float: left / right
position: absolute
display: inline-block / flex / grid

You can test all of them here: http://jsfiddle.net/XB9wX/1/.

I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width.

Sources: Sitepoint's article Collapsing Margins

How to 'disable collisions' without position:absolute in CSS

You can use position:absolute if you change your HTML code because positon:absolute is the logical way to have what you want. To correctly set up the position you need to consider a shrink-to-fit container that will fit your elements so that you can easily define the space for your position:absolute element.

Here is a basic example. Hover to see the result:

.menu {  display: flex;  align-items: center;  justify-content: center;}.wrapper {  display: flex;  position:relative;  z-index:0;}
.wrapper > *{  height: 100px;  width: 100px;  padding: 10px;  cursor: pointer;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  transition: transform 80ms ease-in;}
.menu p {  cursor: text;  margin-top: 0;  letter-spacing: 0px;}
.menu img {  margin-bottom: 5px;  width:100px;}
.menu .home:active,.menu .search:active,.menu .inbox:active {  transform: scale(0.95);}
.menu .bg-block {  position: absolute;  top:0;  left:0;  background-color: lightblue;  z-index: -1;  transition: transform 300ms ease-in;}
.menu .home:hover ~ .bg-block,.menu .home:active ~ .bg-block{  transform:translateX(0);}.menu .search:hover ~ .bg-block,.menu .search:active ~ .bg-block{  transform:translateX(100%);}.menu .inbox:hover ~ .bg-block,.menu .inbox:active ~ .bg-block{  transform:translateX(200%);}

<div class="menu"><div class="wrapper">  <div class="home"><img src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/home-256.png" />    <p>Home</p>  </div>  <div class="search"><img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-256.png" />    <p>Search</p>  </div>  <div class="inbox"><img src="https://cdn2.iconfinder.com/data/icons/maki/100/post-256.png" />    <p>Inbox</p>  </div>  <div class="bg-block"></div> </div></div>

sections in bootstrap colliding with each other

I took a deep look on your website. Your problem is not the margin. It's the owl carousels. Their position is absolute so they goes over other elements

    section.carousel-section .container-fluid {
        overflow: hidden;
        position: absolute;
    }

This should be position:relative;

CSS - borders how to avoid collision

This is example of it you can adjust how you want it to be.

.main {  display: flex;}
.square {  width: 300px;  height: 300px;  border: 2px solid black;  margin: 30px;}

<section class="main">  <div class="square"></div>  <div class="square"></div></section><section class="main">  <div class="square"></div>  <div class="square"></div></section><section class="main">  <div class="square"></div>  <div class="square"></div></section>