Inline elements have the property of being positioned with respect to the bottom edge. Therefore, depending on the font size and line height, there may be a gap below the element. This can be an unexpected space in a design and may need to be adjusted.
One way to solve this problem is to use the vertical-align property of CSS. In particular, setting “vertical-align: bottom;” will position the element against the bottom edge of the parent element, eliminating the bottom gap.
However, because vertical-align is a property that controls the vertical alignment of an element, it may affect its relationship to other elements and the overall layout. When using it, it is important to set it appropriately while keeping harmony with surrounding elements.