HTML Space: 3 Easy Ways

Jun 8, 2020

2 mins read

Published in

HTML

The more space in HTML page, it looks better. Just check this CodeBlogMoney site, more than 70% is space. HTML Space will help to make the document more attractive and readable.

HTML Space makes the site looks better. While learning the first time everyone uses space button to generate more space, and when we run in the browser it still was not reflected.

Do you remember those days? or you are here because it’s not reflected on your page? 🙂 use <pre> tag to use keyboard space. explained in section 3.

HTML Space, 3 ways to make it happen in HTML Page.

1. in HTML

creates extra space after and before any text in HTML.

1
2
3
4
5
6
7
8


<html>
	<head>
		<title>Create Space in HTML</title>
	</header>
		<body>
			How are you &nbsp;&nbsp; doing?
		</body>
</html>	

2. Padding

HTML uses concepts of Margin, border and padding to create more space around the element or object of the HTML.

It can achieve the style attribute of the HTML.

In this image at the right side shows the information about the margin, border and padding of an element of HTML. Like this element has padding at the top, left, right and at the bottom.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<html>
	<head>
		<title>Create Space using Padding</title>
	</header>
	<body>
		<div style="padding-top:50px;padding-left:50px">
				How are you doing?
		<div>
	</body>
</html>

3. <pre>

<pre> means the Preformatted text. It preserve the space in the HTML document which are under the <pre> tag. easiest way to add space.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<html>
	<head>
		<title>Create Space using Padding</title>
	</header>
		<body>
			<pre>
				How    are   you   doing?
			<pre>
		</body>
</html>	

HTML tool to try HTML code.

https://codebeautify.org/htmlviewer/

HTML Space: 3 Easy Ways

1. in HTML

2. Padding

3. <pre>

category

Recent Articles