元素之间的空白，未知来源

Question

Issue solved

On the bottom, between the last element of the page and the Footer, there is a white space, I'm trying to use Chrome dev tools to track the origin of it, but apparently it's not caused either by the last element and the footer.

The only elements in witch it seems the space is coming from, is the body. I already canceled any margin or padding of the body element:

html,body {
margin: 0;
width: 100%;
padding: 0;
}

Compatibility of the website is tested only with Chrome

Answer 1

It's because of the default margin of the heading:

footer h4 {
  margin: 0;
  padding: 1em 0;
}

It becomes obvious when you use the dev tools to inspect the h4 element.

Answer 2

It is caused by the margin on the h4 inside the footer. The fenomenon is explained by collapsing margins :

Margins collapse between adjacent elements. In simple terms, this means that for adjacent vertical block-level elements in the normal document flow, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.

The full explanation can be read here: http://reference.sitepoint.com/css/collapsingmargins