[BUG] - Container / Row / Col gap

[wayf]

Describe the bug

<Container gap={0}>
    <Row gap={1}>
        <Col>qwe</Col>
    </Row>
</Container>
<Container>
    qwe
</Container>

The left padding of the first text block does not match the second

Your Example Website or App

https://codesandbox.io/s/nextui-bug-x1p3ry

Steps to Reproduce the Bug or Issue

None

Expected behavior

Paddings must be the same

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[wayf]

In this case $space$lg must be 1.5rem

space: {
    lg: "1.5rem",
}

[danielsimao]

Hey 👋. The padding is applied by the container. What happens is that in the first use case you have a Row and a Col.

-Row: Applied Margin left. -Col: applies padding in the axis.

The second use case is just a container. So they wont match unless you customise on your end.

The only thing I see as odd here is the margin applied on the Row, but not the padding that you mention.

[wayf]

No, I think the row mast has margin = default container half padding and col is container half padding. Then gap will be correct.

Currently container padding equal 1.5rem, but row margin + col padding - 1.25rem.

[jrgarciadev]

Hey please upgrade to V2 since V1 will no receive more updates.

Use Tailwind CSS layout classes