-5

Can anyone please help me understand where the extra space between divs is coming from and how to get rid of it?

Here is the page: http://www.infinitygap.com/temp/bug.html

Thanks!

tsaitl
  • 1
  • 1
  • 5
    *Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve].* The problem we're trying to avoid is link rot: what happens when that bug page goes away and no one can see what the original problem was? – BSMP Mar 17 '16 at 21:13
  • try `vertical-align: top;` or `vertical-align: bottom;` – L777 Mar 17 '16 at 21:15
  • Duplicate of http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements – David T. Macknet Mar 17 '16 at 21:25
  • This is actually not about a space between two side-by-side elements (David's comment above). Similarly, however, this is the result of browser defaults and could be resolved by using reset.css. Additionally, there's a lot of other problematic code in the example, which I've duplicated and commented on here: http://codepen.io/angeliquejw/pen/YqNLNp?editors=0100 – Angelique Mar 17 '16 at 21:31
  • just add `margin-top: 0px` to the `

    ` inside of `.sub-footnote`, it will fix your issue and then delete this question, it will no longer be valid since there is no code posted.

     – Adam Buchanan Smith Mar 17 '16 at 21:33
  • @AdamBuchananSmith - You can't delete a question with an up-voted answer. – BSMP Mar 17 '16 at 21:34
  • I voted to close either way, patato potato – Adam Buchanan Smith Mar 17 '16 at 21:35

1 Answers1

1

It is because of the margin on the paragraph element that is in the .sub-footnote. If you remove it, you will be fine.

To understand this bug you should understand 2 concepts:

  1. Margin collapsing between descendant elements. The margin on your pragraph is reflected on the .sub-footnote element. Read an article on sitepoint.
  2. Transformation doesn't actually change the DOM flow. So even it the margin looks like in the middle of the .sub-footnote element, it is not.
tzi
  • 8,719
  • 2
  • 25
  • 45