CSS Properties: How to specify the space between words in paragraph element

Last update on March 01 2024 13:09:13 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to specify the space between words in paragraph element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
p { 
    word-spacing: 20px; /* Sets the space between words in paragraph elements to 20 pixels */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<h3><strong>w3resource Tutorial</strong></h3><!-- Displays a level 3 heading with strong text "w3resource Tutorial" -->

<p class="w3r"><!-- Begins a paragraph element with class "w3r" -->
w3resource web development tutorial. <!-- Displays a repeated text within the paragraph -->
w3resource web development tutorial. <!-- Displays a repeated text within the paragraph -->
w3resource web development tutorial. <!-- Displays a repeated text within the paragraph -->
w3resource web development tutorial. <!-- Displays a repeated text within the paragraph -->
w3resource web development tutorial. <!-- Displays a repeated text within the paragraph -->
</p><!-- Ends the paragraph element -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to use the word-spacing property in CSS to specify the space between words in a paragraph element.
The CSS rule sets the space between words in all paragraph elements to 20 pixels.
The repeated text within the paragraph demonstrates the effect of the specified word spacing.

Live Demo:

See the Pen word-spacing-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page