CSS link Spacing and Paragraph Spacing

Question

Here is the site:

http://wesbos.com/tf/shutterflow/?cat=1

1. The banner image at the side that says S&S photography adds a margin of a few pixels to the bottom. This only happens when I link it to a URL.

2. Rollover an image to see the text that is highlighted. This works great except I would like to add some padding to the end of the lines. Normal CSS padding only applies it to the start and end of the P tags. My code needs to be formatted like this: (unless someone knows how to dupe this effect with each line being a paragraph tag

Sorry for the formatting, the editor wont let me put code on multi lines for some reason.

    <p>hey hows it going<br/> this one is<br/> short and this one is longer<br/> will this text<br/> </p>

.cover p {
    display: inline;
   color: #000;
   background-color: #fff;
   padding:5px;
}

Answer 1

You'll need to wrap each line in an element. A span would be a good choice:

<p><span>hey hows it going</span><br /><span>this one is</span>...

You can then add your padding to the span elements.

.cover p {
   display: inline;
   color: #000;
   background-color: #fff;
}

.cover span {
   padding:5px;
}

Answer 2

You should be able to do this with each line being a <p>, but you will have to add an extra <br> at the end of each one:

HTML:

<h3>Nature Orange</h3>
<p>hey hows it going<br /></p>
<p>this one is<br /></p>
<p>short and this one is longer<br /></p>
<p>will this text<br /></p>
<p>do what I<br /></p>
<p>Want?</p>

CSS:

.cover p{  
    display:inline;
    color: #000;
    background-color: #fff;
    margin:0;
    padding:0 5px;
    line-height:1;
    }

I uploaded a demo of this here: http://demo.raleighbuckner.com/so/1303628/

Answer 3

For the sidebar:

Set your image to display:block; to remove the extra space. Because of your other styles you will also have to add either clear:both; to the image as well or take away the float on your top ul (all it's doing is clearing the floated li's, which you can do using overflow:hidden; instead).

For the hover text:

You will have to use separate paragraphs to get padding, but that is easy to do in WP. You don't need the extra <br /> at the end of each if you use float instead of display:

 .cover p {
    float: left; /* so they don't fill the full width */
    clear: both; /* so they don't float next to each other */
    color: #000;
    background-color: #fff;
    padding:5px;
 }

Of course, I would leave the display: inline; as well anywhere you are floating. It takes care of the IE5/6 doubled float-margin bug. But that is a different issue.

Answer 4

To get rid of the extra space at the bottom of your banner image, use:

#sidebar a img {vertical-align:bottom;}

Images default vertical alignment is baseline which leaves room for text descenders.