Pin Me

Why You Should Use CSS For Your HTML Spacing

written by: William Springer•edited by: Amy Carson•updated: 5/15/2011

One of the largest challenges in setting up a good-looking website is making everything go exactly where you want it. There are several techniques; here's why cascading style sheets are the best way to do it.

  • slide 1 of 6

    Figuring Out HTML Position

    A significant minority of the people who design web pages actually have a good idea of what they want the pages to look like. Actually getting them to look that way, however, is easier said than done. HTML is a markup language, not a graphic program; it was intended to mark up text to describe its semantics, rather than its presentation. That said, people have come up with a lot of creative ways to get the design they want using the available page elements.

  • slide 2 of 6

    Spacing With Tables

    When it comes to solving spacing issues with HTML code alone, the table is far and away the most popular solution, at least up until the last couple of years. The purpose of a table is simple: it's ideally suited for displaying tabular data, such as schedules or weather forcasts. What people realized, however, is that by making the whole page a table and then putting smaller tables into individual cells, they could actually position an element anywhere they desired.

    This actually works pretty well, except for two things. One is that this leads to a lot of extra code - extremely large, complicated tables full of mostly empty cells, which means the code takes up a lot more space than it really needs to. The other is that this code is basically impossible to modify; if you want to move things around, you pretty much have to throw out the whole thing and start over.

  • slide 3 of 6

    The Non-Breaking Space

    Another issue that people have had is that HTML condenses whitespace; put in any number of spaces, tabs, and returns, and they all condense down to one tab (although you could avoid that by using the <pre> tag; pre, which stands for preformatted, forces everything inside the tag to show up exactly as you type it). There's a way around that, however - the non-breaking space, &nbsp;. WYSIWYG editors, in particular, often use &nbsp; to control the layout, although since browsers do not handle it consistantly this can lead to unpredictable results.

  • slide 4 of 6

    Spacing with Tiny Images

    Another common technique is to use a 1-pixel transparent image; while it can't be seen, it takes up space and thus can be used to push other page elements over to where they should go. As with other techniques, the results can be unpredictable, and it can take a bit of work to get everything positioned the way you want it to be.

    If only there was a way that you could just specify exactly where everything should go, such that you can forget about using all of these different tricks in your HTML code to handle all the different types of spacing issues..

  • slide 5 of 6

    Cascading Style Sheets

    Cascading Style Sheets, or CSS, have been around for a while - since the late 90s - but have only recently become popular. CSS allows us to separate content from presentation: we use HTML to mark up the language for semantics, then use CSS to define how particular elements should be displayed.

    This is a great thing for people who are picky about how their websites look, because you can specify exactly where every element goes. Want that image to be placed exactly 37 pixels from the top of the screen and 23 pixels from the left? You can do that. And it gets better - if you want to move things around, or have the page elements expand on a bigger monitor, you can do that too. CSS gives you the control you want, at the cost of code that's easier to read and faster to load. Now there's a deal I can get behind!

  • slide 6 of 6

    About the Author

    While working on his PhD in computer science, William occasionally did web work for his wife's web design business. He now works as a software developer.