React-grid-layout: Unintuitive definition if `margin` (Or wrong documentation)

[hepiyellow]

In the README file the margin property is defined as such:

// Margin between items [x, y] in px.
margin: ?[number, number] = [10, 10],

Looking at the code, and the actual behavior, the margin is the margin between grid cells.
So if an item spreads over 2 cells (say h=2), then it's height would include the margins.
Example:

rowHeight=50
margin=[0,10]

for an item with h=2, the actual height would be 110px.

[STRML]

Yes, but this must be so; a grid item that spans multiple rows or columns must also span the rowspan/colspan.

[hepiyellow]

So maybe just a fix in the README ?

// Margin between grid cells [x, y] in px.
margin: ?[number, number] = [10, 10],

[cguodesign]

Just finished a conversation with my developer. I felt this definition is a little bit confusing. He thought this [10,10] add 5px on each side (top, left, right, bottom). But I think this [10,10] only add 10 on the left and 10 on the right based on the translate properties from our result.

So if I'm right, the document would be more clear if we say something like:
// Move the grid cells [x - from left, y - from top] in pixels to create a margin space which has 10 px in width and 10 px in the height.
margin: ?[number, number] = [10, 10],

[kumarharsh]

For anyone still confused, the author has already clarified this many times about why the margin will be added to the height of multi-row items. See the comment here: https://github.com/STRML/react-grid-layout/issues/277