margin auto query
Hey, in this example, i'm aligning the button on the card to the right side. I have a few questions regarding the methods to do so.
1) On the first card, a simple
margin-left: auto; wont work, however when flex or grid is applied to the parent as seen on the second card it does, why is this the case?
2) By using a method other than applying flex or grid to the parent, as seen on the third card, the text wraps, what causes this behaviour?
I'd appreciate and value any insight so i can understand how things work more, thanks in advance!
https://codepen.io/deerCabin/pen/qBwymYe2 Replies
1) margin-left: auto; There is no available horizontal space in an inline setting. Before and after it are potential other inline elements that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.
2) margin-left: 100%; percentages are relative to the content box size of the containing element, but because there is not enough space for it, it will do it's best to fit in (which causes the wrap)
white-space/word-wrap: no-wrap prevents that from happening
*) because you use an inline element, you are able to wrap it in block element (such as a <p> or <div>) and text-align: right;
**) other option is to make the button a block element with width: fit-content and use margin-left: auto; (this is 'simular' to what grid/flex doesah that makes perfect sense, thank you.