htmlcssfooterword-spacing

CSS 'word-spacing' property not working properly

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

Solution

  • 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>