HTML/CSS - Do you know how to create spaces in a web page?

Last updated by Tiago Araújo [SSW] 8 months ago.See history

There are many scenarios where you need some extra space in a web page (HTML or Markdown). 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 codes for "space" &#160; / &nbsp; 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

Note: If you cannot use CSS to create some breathing space, using <br /> maybe acceptable as last resort for better readability.

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, they will be more than happy to help you.


We open source.Loving SSW Rules? Star us on GitHub. Star
Stand by... we're migrating this site to TinaCMS