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.

Tell a Friend about this

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: