Почему элемент выезжает за переделы родительского эелемента с margin?

Question

[kokapuk]

<div className="card">
          <div className={cn("card-body", styles['bs-border-box'])}>
            <input type="text" className={cn("form-control", "mx-5", styles['bs-border-box'])} placeholder="Username" />
          </div>
        </div>

border-box не помог

Comments

[Ankhena]

Почему элемент выезжает за переделы родительского эелемента с margin?

Очевидно, потому что не влез.

border-box не помог

Было бы странно, потому что box-sizing к margin не имеет отношения.

А чтобы узнать, что у вас там происходит, сделайте песочницу с видимой проблемой на codepen.io, иначе неизвестно что там у вас в стилях.
Но вероятно, там ширина стоит типа 100%.

Answer 1

[EugeneNail]

Описание вопроса не дает никакой конкретики, поэтому буду отталкиваться от способа управления элементами.

Скорее всего, инпут вылезает за пределы контейнера из-за того, что внутренние отступы контейнера сделаны не через padding контейнера, а через margin инпута

Answer 2

[Holy Molly]

Попробуй задать свою ширину и длину в процентах