In HTML, space management is very important for layout and readability. The "<br>" tag creates a line break in text, which brings content to start on a new line. This makes it easy when you want to structure text into separate lines, similar to hitting "Enter" on your keyboard.
On the other hand, " " (non-breaking space) inserts a space that prevents browsers from bringing multiple consecutive spaces into one. It's useful for situations where you need to maintain specific spacing between words or elements without them wrapping to a new line.
Below are the approaches to add space in HTML:
Using <br> Tag
One of the easiest ways to add space in HTML is by using the <br> tag, which stands for "line break." Simply insert this tag where you want to create a new line or add vertical space between elements.
Example: This demonstrates the use of the <br> tag to create a line break within a paragraph, separating text into two distinct lines.
<!DOCTYPE html>
<html>
<head>
<title>Using br tag</title>
</head>
<body>
<p>This is the first line.<br>This is the second line.</p>
</body>
</html>
Output:
Using Margin and Padding
HTML also allows you to adjust spacing around elements using CSS (Cascading Style Sheets). Margin and padding are two CSS properties commonly used for spacing:
- Margin: Adds space outside the border of an element.
- Padding: Adds space inside the border of an element.
Example: This demonstrates a box with a black border, 20px margin, and 10px padding, containing the text "Content with margin and padding".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Box with Margin and Padding</title>
</head>
<body>
<div style="margin: 20px; padding: 10px;
border: 1px solid black;">Content with
margin and padding</div>
</body>
</html>
Output:
Adding Whitespace
HTML collapses consecutive whitespace characters (such as spaces, tabs, and line breaks) into a single space when rendered in the browser. However, you can preserve whitespace using the <pre> tag or the CSS white-space property.
Example: This example shows the adding of White space.
<!DOCTYPE html>
<html>
<head>
<title>using Whitespace</title>
</head>
<body>
<style>
.preformatted {
white-space: pre;
}
</style>
<pre>This text will preserve whitespace.</pre>
</body>
</html>
Output:
Using   Entity
This entity represents a non-breaking space in HTML. It creates space without allowing the browser to break the line. You can use it to add horizontal space between words or elements.
Example: This demonstrates the use of the non-breaking space entity (` `) to maintain fixed spaces in the sentence "This is spaced out."
<!DOCTYPE html>
<html>
<head>
<title>Using nbsp entity</title>
</head>
<body>
<p>This is spaced out.</p>
</body>
</html>
Output:
