Why aren't the margins collapsing?
Can anyone explain why the margin of each sibling MUI TextField components aren't collapsed?
sandbox link -
https://codesandbox.io/p/sandbox/c3kptp?file=%2Fsrc%2FApp.tsx%3A10%2C24
Thank you.
4 Replies
Because they are
display: inline-flex and not display: flex. Margin collapse is only applied to block-level elements.Oh okay, understood. Thank you.
One more question.
How come inline-flex elements can have vertical margins even though they behave like an inline-level element?
Because a flex container is a block level element, and inline-flex is just a version that doesn’t take up the full width of the container, it’s similar to inline-block
Understood. Thanks.
Also, any guess as to why MUI decided to make the TextField component inline-flex. Is it because the HTML input element is inline-block by default?