Styling draggable item with both margin top and bottom will cause uneven gaps in the placement

[ayushkamadji]

Bug or feature request?

Bug

Expected behavior

When an item is dragged from a list, the other items should move around it with equal margin/spacing between them. Even when styled with both margin-top and bottom.

Actual behavior

When a draggable has both margin top and bottom styling, the offset calculation is off. This results in items being nudged either up or down from their ideal position. This is probably related to #201, but this isn't only with keyboard dragging.

Steps to reproduce

1. Have the usual minimal setup for list item drag and drop.
2. Style the list item with a margin top and bottom
3. Drag an item across the list to see uneven offset/spacing between items.

What version of React are you using?

16.5.2

What version of react-beautiful-dnd are you running?

10.0.2

What browser are you using?

Firefox 63.0.3 (64-bit) Windows 10

Demo

Sandbox

Demo sandbox

Animation

Pay attention to the gap between first and second item, and between the last and second last item

[alexreardon]

Hi there, your example has issues because there is margin collapsing between the items. The is currently unsupported: https://github.com/atlassian/react-beautiful-dnd#unsupported-margin-setups