Do you think IIT Guwahati certified course can help you in your career?
Introduction
In web development, spacing is a vital component to ensure the content looks good and can be read easily. In HTML, there are several ways that one can add space between elements. In this article we will discuss how to add spacing in HTML, from adding non-breaking spaces to the utilization of CSS.
Using Non-Breaking Space
In HTML, a non-breaking space character is widely used to add spaces between text and other elements. Unlike the regular spaces, a non-breaking space prevents the browser from breaking the text at that point so that the space will not be broken if the text overflows to the next line.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Non-Breaking Space Example</title>
</head>
<body>
<p>This is an example of non-breaking spaces.</p>
</body>
</html>
In the code above, the is used to add extra spaces between the words "example" and "of". The number of spaces added depends on how many entities you include.
Output:
Here, the text will display with multiple spaces, and the spaces won’t collapse or break when the text wraps.
Using Multiple Non-Breaking Spaces
Sometimes, you may require more than one non-breaking space to make a space wider. You can achieve this by adding more characters. Ensure that HTML ignores regular spaces, so the use of multiple is the best option to create extra space.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Non-Breaking Spaces</title>
</head>
<body>
<p>This is one space with four non-breaking spaces.</p>
</body>
</html>
Output
In this example, four non-breaking spaces are added between the words "one" and "space", which creates a larger gap than a single non-breaking space.
Using Preformatted Text Tag
The <pre> tag is used to display preformatted text, including spaces and line breaks. It is the best to use when the exact spacing needs to be maintained like in cases of displaying codes, ASCII art, or content of the same nature.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preformatted Text Example</title>
</head>
<body>
<pre>
This is an example
with spaces and line
breaks preserved.
</pre>
</body>
</html>
Output:
In this case, the <pre> tag displays the text exactly as it is written, maintaining all spaces and line breaks.
Using Break Tag
The HTML tag is used to introduce a line break in the text. It does not provide horizontal space but pushes the content to the next line, which can be useful for creating vertical space between elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Break Tag Example</title>
</head>
<body>
<p>This is the first line.<br>This is the second line after a break.</p>
</body>
</html>
Output:
The <br> tag is useful for creating vertical spacing, but it is important to note that it doesn’t add extra spaces like other tags. It simply moves the text to the next line.
Using Paragraph Tag
The <p> tag in HTML is used for paragraphs, and it automatically adds space before and after the paragraph. This tag is perfect when you want to separate blocks of text and create vertical spacing between them.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Tag Example</title>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph, which is spaced from the first one.</p>
</body>
</html>
Output:
Here, the <p> tag adds vertical space between the two paragraphs automatically, making it easier to format content without needing additional CSS.
6 Easy Ways to Insert Spaces in HTML
1. Using Non-Breaking Space ( )
A non-breaking space ( ) is a special character used in HTML to add additional space between words or elements. Unlike a regular space-the browser collapses when there are multiple spaces-a non-breaking space does not collapse and retains the space. This comes in handy when you want to preserve specific spacing between words or elements.
Example:
<p>This is an example with multiple non-breaking spaces.</p>
In this example, two non-breaking spaces are added between "example" and "with". This ensures a consistent gap, even if the text wraps onto the next line.
Why use it?
To create fixed spaces that won't collapse.
When precise spacing is required in specific situations, such as between words or elements.
2. Using Multiple Non-Breaking Spaces
If one non-breaking space ( ) is not enough, you can use multiple entities to create a wider gap. Adding more controls the amount of space you need.
Example:
<p>This is more space with four non-breaking spaces.</p>
Here, four non-breaking spaces are used to create a wider gap between the words. This technique is simple and effective for adding extra space within the text.
Why use it?
For larger spaces between text when a single space isn't sufficient.
To keep the text formatting intact, ensuring no wrapping happens inappropriately.
3. Using Preformatted Text (<pre>)
The <pre> tag in HTML is used for preformatted text. Any text inside the <pre> tag will retain both spaces and line breaks exactly as written. This is especially useful when displaying code, ASCII art, or any content where the precise formatting is important.
Example:
<pre>
This is some preformatted text.
The spaces and line breaks will be preserved.
</pre>
This tag keeps the spacing exactly as you type it in the HTML code. It doesn't collapse spaces or ignore line breaks like other tags might do.
Why use it?
When you need to display content that should retain its exact formatting, such as code or poems.
To ensure spaces and line breaks are displayed exactly as written.
4. Using Break Tag (<br>)
The <br> tag in HTML stands for line break. It creates a new line wherever it is placed, which effectively adds vertical space between content. While it doesn’t add horizontal space like the other methods, it's ideal for spacing text across different lines.
Example:
<p>This is the first line.<br>This is the second line after a break.</p>
The <br> tag tells the browser to move to the next line without starting a new paragraph. It’s useful for separating text or elements vertically.
Why use it?
To break lines of text when you want them to be on separate lines.
For short breaks where you don’t need a full paragraph but just need some vertical space.
5. Using Paragraph Tag (<p>)
The <p> tag in HTML is used to define a paragraph. A browser automatically adds space before and after each paragraph, helping in separating blocks of text. It is one of the easiest methods and most commonly used methods to add vertical space between different sections of content.
Example:
<p>This is the first paragraph.</p>
<p>This is the second paragraph with space between the first one.</p>
In this example, there’s a default space between the two paragraphs, making the content more readable.
Why use it?
For separating blocks of text.
When you need vertical spacing between distinct sections of content.
It automatically adds spacing, making it simple to organize content without needing extra CSS or HTML entities.
6. Using Margin and Padding in CSS
CSS (Cascading Style Sheets) provides more control on the spacing, especially for the elements. Margin and padding are two key properties that in CSS allow you to add some space inside and outside an element. The margin puts space outside the element. On the other hand, padding adds space inside an element, around its content.
Margin is used to create space outside an element, pushing other elements away from it.
Padding is used to create space inside an element, around its content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
}
</style>
<title>CSS Margin and Padding</title>
</head>
<body>
<p>This is a paragraph with CSS margin and padding applied.</p>
</body>
</html>
Output
In this example, a margin of 20px is applied to the top and bottom of the paragraph, while 10px of padding is added inside the paragraph. This allows you to control the spacing around and inside the paragraph.
Why use it?
To have precise control over spacing between elements.
For better overall layout design, where consistent spacing is required.
Margin and padding are preferred when designing responsive websites because they give you more flexibility.
How to Insert a Space in CSS
While HTML provides several ways to add space, CSS offers even more control over spacing between elements using properties like margin, padding, and line-height.
Margin: Adds space outside the element.
Padding: Adds space inside the element, around its content.
Line-Height: Controls the space between lines of text.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Space Example</title>
<style>
p {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
line-height: 1.6;
}
</style>
</head>
<body>
<p>This is a paragraph with margin, padding, and line height adjusted using CSS.</p>
</body>
</html>
Output:
The paragraph will have extra space at the top and bottom, with some padding inside it. The line height will be increased, making the text easier to read.
Accessibility Concerns with HTML Spaces
When adding spaces in HTML, it's important to consider accessibility for users who rely on assistive technologies like screen readers. Let’s discuss a few of the guidelines to keep in mind:
1. Use sparingly: Excessive use of non-breaking spaces can make the text difficult to read & navigate for users with screen readers. Instead, use CSS for spacing whenever possible.
2. Provide meaningful content: Ensure that the spaces you add serve a purpose & don't disrupt the flow of content. Avoid using spaces purely for visual formatting.
3. Use semantic markup: Utilize appropriate HTML tags like <p>, <ul>, <ol>, & <h1> to <h6> to structure your content. This helps screen readers understand the hierarchy & meaning of the webpage.
4. Test with assistive technologies: Regularly test your website with screen readers & other assistive tools to ensure that the spacing doesn't hinder accessibility.
Let’s take an example of using semantic markup & CSS for spacing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility Example</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
h2 {
font-size: 20px;
margin-top: 30px;
margin-bottom: 10px;
}
p {
margin-bottom: 15px;
}
ul {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Accessible Spacing Example</h1>
<h2>Section 1</h2>
<p>This is the first paragraph of section 1. It provides an introduction to the topic.</p>
<p>Here's another paragraph with additional information.</p>
<h2>Section 2</h2>
<p>In this section, we'll discuss some key points:</p>
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>
<p>By using semantic markup and CSS for spacing, we ensure that the content is well-structured and accessible to users with assistive technologies.</p>
</body>
</html>
Output
In this example:
1. The `<h1>` tag is used for the main heading, with a bottom margin applied through CSS.
2. `<h2>` tags are used for section headings, with top and bottom margins defined in the CSS.
3. Paragraphs are wrapped in `<p>` tags, and a bottom margin is applied for spacing.
4. An unordered list `<ul>` is used to present key points, with a bottom margin for separation.
Frequently Asked Questions
What is the symbol used for in HTML?
The symbol is used to insert a non-breaking space, which prevents the browser from breaking text at that point.
How do I add vertical space between paragraphs?
You use the <p> tag in HTML, which automatically applies some space before and after paragraphs.
How does CSS control spacing?
By margin, padding, or line-height properties, spacing is handled in CSS. Through these properties, you have an ability to add interior or exterior space to elements while spacing lines of text in terms of height.
Conclusion
In this article, we covered several ways of adding space in HTML: from non-breaking spaces to the power of CSS. Whether you are working on a personal project or getting ready for a job interview, it is crucial to master these spacing techniques to write well-structured web pages.
518+ registered 
