Home
HTML/CSS - Do you know how to create spaces in a web page?
  v6.0 Posted at 3/07/2012 12:51 AM by Tiago Araujo

There are many scenarios where you need some extra space in a web page. No matter which one you are at, CSS is the answer.

Sometimes the first thing that comes to the developer mind is to use the "break line" tag (<br />) or the ASCII character code for "space" (&#160;) to create these extra spaces. It's wrong. CSS is the way to go. You can use both "margin" or "padding" CSS properties to get the result you want.

<ul>
<li>&#160;&#160;&#160;List item</li>
</ul>
Figure: Bad Example - Using the "space" ASCII character to create a padding on that list
<ul>
<li>List item</li>
</ul>
<br />
<br />
<br />
Figure: Bad Example - Using the <br /> tag to create a space at the bottom of that list
ul {margin-bottom:15px;}
ul li {padding-left:10px;}
Figure: Good Example - Using CSS to add a margin at the bottom of the list a the padding on the left side of each list item

Tip: You might be not familiar with editing a CSS file. In this case, contact a designer. He/She will be more than happy to help you.

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments:

    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.