One of the CSS properties, letter-spacing, is used to adjust letter spacing. However, even if letter-spacing is applied to a parent element such as the body element, the letter spacing of the child elements may not be as expected.
The reason for this is that letter-spacing is not a property that is automatically inherited by child elements. Therefore, if you want to apply the same letter-spacing to all elements, or if you want to unify the letter-spacing below a particular element, you can try the following solutions.
Solution 1: Apply letter-spacing to all elements
* {
letter-spacing: 0.1em;
}This method applies letter-spacing to all elements. However, if you want to change the letter spacing on a specific element, you must apply the style directly to that element.
Solution 2: Use custom properties to control inheritance
:root {
--spacing: 0.1em;
}
*{
letter-spacing: var(--spacing);
}
.child {
--spacing: 0.05em;
}This method allows the use of custom CSS properties to inherit letter spacing. Using this method, changing the character spacing below a particular element can be accommodated by simply changing the value of the custom property.