CSS 'word-spacing' property not working properly

Question

I have an unordered list with list items that I want to spread evenly from each other but the elements don't spread evenly.

<footer>
    <ul class="footer">
        <li><a href="about">Name©2023</a></li>
        <li><a href="legal">Privacy&Legal</a></li>
        <li><a href="vin-recall-search">Vehicle Recalls</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="blog">News</a></li>
        <li><a href="updates">Get Updates</a></li>
        <li><a href="findus/list">Locations</a></li>
    </ul>
</footer>

In the CSS file:

footer li{
    word-spacing:20px;
    display:inline-block;
}

The word spacing between the items isn't identical. it looks like this

Answer 1

That's because you use the spacing on the li elements instead of the ul element.

You need to change your CSS like below.

footer li{
    display:inline-block;
    word-spacing: normal;
}

footer ul{
    word-spacing:20px;
}

<footer>
    <ul class="footer">
        <li><a href="about">Name©2023</a></li>
        <li><a href="legal">Privacy&Legal</a></li>
        <li><a href="vin-recall-search">Vehicle Recalls</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="blog">News</a></li>
        <li><a href="updates">Get Updates</a></li>
        <li><a href="findus/list">Locations</a></li>
    </ul>
</footer>

Answer 2

You can use the new Flexbox specification as well

footer ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
}
footer li {
    display: block;
    flex: 0 1 auto; /* Default */
}

<footer>
    <ul class="footer">
        <li><a href="about">Name©2023</a></li>
        <li><a href="legal">Privacy&Legal</a></li>
        <li><a href="vin-recall-search">Vehicle Recalls</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="blog">News</a></li>
        <li><a href="updates">Get Updates</a></li>
        <li><a href="findus/list">Locations</a></li>
    </ul>
</footer>

For Ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/