Hi everyone,
Today I am wondering about what are some use cases for inline-block elements.
The use cases for display: inline; and display: block; are intuitive to me. Use inline if you want to apply a style to a short span of text (e.g. a few words), and block for creating containers with a set height and width. There are also other applications of inline/block.
I haven’t dealt with inline-block elements that much, so I was wondering if someone has some insight into this.
Thank y’all!
I was about to write some examples, but then I remembered this pandemic reading on CSS Tricks that is really good:
The article talks about how 1) “block-direction margin on inline elements is ignored entirely” and 2) “the padding on inline elements doesn’t affect the height of the line text”.
What do they mean by block-direction? Elements that have display: block; are ordered from top to bottom, so does this just mean the margin-top and margin-bottom of inline elements are ignored?
For the second statement, does the padding of the inline element get calculated when determining the height of the element, but ignored by the parent
OR
does the padding just get ignored when calculating the height of the child, thus the parent height isn’t affected.
That is correct about the block-direction. In languages like English where characters flow horizontally, the margin-top and margin-bottom on inline elements are ignored. The margin-left and margin-right properties will work.
No, the height of the element doesn’t contain the padding values. Visually we can see it, but the actual height calculation (like via getComputedStyle) will just return auto.
Great questions!
:: Copyright KIRUPA 2024 //--