Question

I have this wireframe I am working from:

http://problemio.com/problemionewest.pdf

and on the right side there is a list of categories. I made them here using

tags: http://www.problemio.com like this:

<p style="color: #2e6ea4;"><strong>Environment</strong></p>
        <p style="color: #B77F37; padding-left: 80px;"><strong>Homelessness</strong></p>
        <p style="color: gray; margin-left: 20px;"><strong>HealthCare</strong></p>
        <p style="color: #2e6ea4; padding-left: 80px;"><strong>Business</strong></p>
        <p style="color: #B77F37; padding-left: 120px;"><strong>Relationships</strong></p>
        <p style="color: gray; padding-left: 80px;"><strong>Philosophy</strong></p>                     
        <p style="color: #2e6ea4; padding-left: 20px;"><strong>Social Issues</strong></p>
        <p style="color: #B77F37; padding-left: 100px;"><strong>Technology</strong></p>
        <p style="color: gray; padding-left: 50px;"><strong>Finance</strong></p>
        <p style="color: #2e6ea4; padding-left: 130px;"><strong>Real Estate</strong></p>

But there is too much space between them vertically. Is there a way to decrease the vertical space between them?

Thanks!!

Answer 1

First of all, be warned: inline CSS is a terrible idea. Read on.

Short answer: You need to adjust your paragraph’s margin property using CSS. Add this between your <header> tags:

<style type="text/css">
p {
   margin: 5px 0;
}
</style>

Change the 5px to the desired margin height. Note this will change the margin on all paragraphs in your document. In order to avoid this, you need to assign the parent element of the paragraphs an id and reference it:

<div id="sidebar">
    <p>Social</p>
    // etc...
</div>

Then modify your CSS:

<style type="text/css">
#sidebar p {
   margin: 5px 0;
}
</style>

Long Rant:

In reality, this is not the approach you should take. Defining inline or in document style makes maintenance and changes a nightmare, and you lose consistency.

Using external stylesheets makes it easier and quicker to edit and maintain your sites style and design. You also remain consistent.

That’s a lot of content to get into here, you can Google this subject in your own time. But you should look into linking an external stylesheet and defining your styles there.

Take a look at the Bootsrap framework.