The art of spacing words in a div using spans

Having difficulty with word spacing within a div using spans. Take a look at the following HTML code: 

<div class="footer-links">
                    <span><a href="#">Suggestions</a></span>
                    <span><a href="#">Help</a></span>
                    <span><a href="#">Contact us</a></span>
                </div>

Here is the accompanying CSS : 

.footer-links{
    float: right;
    margin-top: 11px;
    margin-bottom: 11px;
}

You can view a JS fiddle of this here.

Any tips on how to improve word spacing for better readability?

Thank you!

javascripthtmlcss

Answer №1

The text may be difficult to read because the words are too close together.

.footer-links{
float: right;
margin-top: 11px;
margin-bottom: 11px;
  word-spacing: 5px;
  letter-spacing: 2px;
}
<div class="footer-links">
                    <span><a href="#">Suggestions</a></span>
                    <span><a href="#">Help</a></span>
                    <span><a href="#">Contact us</a></span>
                </div>

To enhance readability, I adjusted the spacing between letters using letter-spacing and added space between words with word-spacing.

Answer №2

To create space between the span elements horizontally, simply apply a margin. To exclude the first span, you can utilize either :not(:first-child) or span + span.

.footer-links {
  margin: 11px 0;
  float: right;
}
.footer-links span:not(:first-child) {
  margin-left: 1em;
}
<div class="footer-links">
  <span><a href="#">About Us</a></span>
  <span><a href="#">Services</a></span>
  <span><a href="#">Contact Us</a></span>
</div>

Answer №3

Why not utilize the margin css property to enhance their clarity?

.footer-links a {
  margin: 0 5px 0 5px;
}


.footer-links {
  float: right;
  margin-top: 11px;
  margin-bottom: 11px;
}

.footer-links a {
  margin: 0 5px 0 5px;
}
<div class="footer-links">
  <a href="#">Suggestions</a>
  <a href="#">Help</a>
  <a href="#">Contact us</a>
</div>

Answer №4

When creating a list of links, it is recommended to use a ul element for better organization. In this case, the ul has been placed within a <footer> element, but if you are not using the HTML5 doctype, a div can be used instead. By adding margin to the ul lis, you can create a horizontal list with evenly spaced li's.

To enhance the design further, consider adding an "active" class to the li that corresponds to the current page. This way, the footer links will not only be well-spaced but also relevant to the content on your website.

.footer-links {
  list-style:none
}

.footer-links li {
display:inline;
margin-right:30px
}
<footer>
  <ul class="footer-links">
    <li><a href="#">Suggestions</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
 </footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the width of individual columns in Bootstrap 4 responsive tables to ensure they have specific widths

I am currently working on setting up a table where specific columns require a fixed width and do not adjust automatically. Despite attempting a method to achieve this, I have encountered issues as the width still adjusts based on the length of the text. ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

In a Javascript scenario, only the initial button can successfully submit to an Ajax form even when having unique

Similar issues have been reported by other users when looping rows of buttons, often due to inadvertently reusing the same Id or value. I am facing a similar issue, but each of my buttons is unique. AJAX request <script> $(document ...

javascriptphpjqueryajax

The TinyMCE editor's input box lost focus while on a popup dialog

Whenever I attempt to access the TinyMCE editor in a dialog box popup and click on "Insert link", the "Insert link" dialog box pops up but I can't type anything into the text field. I suspect that the issue may stem from having a dialog box open with ...

javascriptjquerydialog

How can I use htaccess to forward all links within a specific folder to index.php with a GET variable attached?

Is it possible to redirect all links inside a folder to index.php while passing the file name as a GET variable? I have never worked with htaccess before and don't know how to search for it. For instance: localhost/folder/file-123 should redirect to ...

phphtml.htaccess

transmitting user data to specified div container

Hey there, I have a question about sending user input to a div section in an HTML document. I've asked this before, but now I'm trying to be more specific. I'm having trouble getting the user input to display below each other in the div whe ...

javascripthtml

What is the best way to ensure my website page fits the browser window properly?

I'm currently working on my portfolio page for a class project. I want to make sure that the webpage adjusts properly when the browser window is resized, particularly the navigation links in the header section. When the screen is in full view, the nav ...

csspositioninghtml

What is the best way to align isotope and organize its components?

I have searched for solutions to my issue with centering isotope on my project, but none of the existing answers were sufficient. I am facing challenges trying to center isotope without creating extra space between its elements and arranging them in a spec ...

htmlcssjquery-isotope

Arabic Presentation of Sweetalert Error Confirmation Icon

When using sweetalert in right-to-left (RTL) direction, the checked icon on sweetalert displays a problem, as shown below: Large image view the image here Is there any solution to this issue? Note: This problem is only visible in RTL (Arabic) direction. ...

javascripthtmlcssajaxsweetalert

Modify iframe form action URL dynamically upon user visiting the URL with a specified parameter

Below you will find a code example: The page URL is: <html> <body> <h1>main page</h1> <iframe src="http://example2.com"> <form id="test" action="http://example3.com?id=1"> ... </form&g ...

javascriptjqueryhtmliframe

Collecting *every single* link from a specified webpage and subsequently performing a keyword search on them

Just dipping my toes in the world of python language. I'm on a quest to gather all the links from a particular web page: Attempting to extract links using a python script from the following page: https://web.archive.org/web/*/ I'm particularly ...

pythonhtmlseleniumbeautifulsoup

Guide: Building Angular/Bootstrap button checkboxes within a loop

I am in the process of designing a grid (table with ng-repeat) in which each row contains 4 columns of buttons. My goal is to use checkboxes as the buttons, like the Angular/Bootstrap btn-checkbox, so that they can be toggled on and off. I plan to set thei ...

javascriptjqueryangularjstwitter-bootstrapangular-ui-bootstrap

Obtain the content of a clicked item on the following page using NextJs

I am currently working on a nextjs app that displays a list of 10 movies on the homepage, each with a Button / Link that leads to a specific page for that movie where all its content is shown. Initially, I tried adding the movie id to the Link like this: ...

javascriptreactjstypescriptsingle-page-applicationnext.js

I am encountering a situation in which the controller file is returning empty data when logging the contents of req

User Model const mongoose = require("mongoose"); const userSchema = mongoose.Schema( { name: { type: String, required: true }, email: { type: String, unique: true, required: true }, password: { type: String, required: true }, pic: { ...

javascriptnode.jsmongodbexpressmongoose-schema

Ways to receive JavaScript console error messages to aid in debugging your code

Currently, I am developing a Web Application and facing an issue with capturing console errors. Specifically, I need to capture errors related to network connectivity issues, such as when the network is down or slow causing responses from the server to be ...

javascriptangularjsconsolewindow

Is there a way to create a Vue component that can process dynamic formulas similar to those used in

I am looking to create a component that has the ability to accept different formulas for computing the last column. The component should use these formulas in Vuex getters to store the total state values passed to it. Here are the specifications for the c ...

javascriptvue.js

Guide on efficiently injecting data into a database using JavaScript and SQL from an array of objects

Let's simplify this process. I am creating a dynamic form for clients to submit data to a PostgreSQL database using React on the front end and NodeJs on the back end. Once the form is filled out, the inputs are stored in an array of objects like this ...

javascriptsqlnode.jsreactjspostgresql

Challenges with personalized music player

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/CSS"> #custom{ font-family: monospace; font-size: 16px; max-width: 650px; ...

javascriptcsshtmlaudio

How come my FormData POST request isn't being blocked by CORS policy?

I am facing confusion with one query: why does my POST request, which sends form data from a frontend hosted on a different origin to a backend hosted on a different origin, not get blocked by CORS policy? My Node.js code includes the following: const exp ...

javascriptnode.jsapiaxiosmulter

Require help extracting a JSON object

I am currently working with a JSON database to showcase ingredients on the webpage. For each recipe, I have a dedicated HTML page. To display the ingredients, I am hand typing them into an unordered list on the page. My challenge lies in trying to fetch t ...

javascriptarraysjson

Having trouble integrating Twilio into your Meteor app? Getting a ReferenceError that says "Twilio is not defined"?

Let me start by saying that I'm new to Meteor and Twilio, so it's likely that I've overlooked something simple. I'm utilizing the Twilio API bindings from this source in an attempt to send an SMS message within a Meteor.methods functio ...

javascriptmeteornpmtwilio