CSS Link Abstand und Absatzabstand

Question

Hier ist die Website:

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

1. Das Banner auf der Seite, die sagt S & S Fotografie an der Unterseite eine Marge von wenigen Pixeln hinzufügt. Dies geschieht nur, wenn ich es mit einer URL verlinke.

2. Überfahren Sie ein Bild, um den markierten Text zu sehen. Das funktioniert gut, außer dass ich am Ende der Zeilen etwas Polsterung hinzufügen möchte. Normales CSS-Padding wendet es nur auf den Anfang und das Ende der P-Tags an. Mein Code muss wie folgt formatiert werden: (es sei denn, jemand weiß, wie man diesen Effekt zu übertölpeln mit jeder Zeile

Sorry für die Formatierung eines Absatz-Tag sein, der Herausgeber mich nicht Code auf mehreren Linien aus irgendeinem Grunde setzen lassen

<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

Um von dem zusätzlichen Platz an der Unterseite des Banner-Bild, verwenden Sie loszuwerden.

Answer 2

Sie müssen jede Zeile in einem Element wickeln eine Spanne eine gute Wahl sein würde...

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

Sie können dann Ihre Polster auf die Spanne Elemente hinzufügen

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

.cover span { 
    padding:5px; 
} 

Answer 3

Sie sollten diesen in der Lage sein zu tun, mit jeder Zeile > ein < p zu sein, aber Sie werden ein zusätzliches <br> am Ende eines jeden hinzufügen:

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; 
    } 

hochgeladen ich eine Demo dieses h ere: http://demo.raleighbuckner.com/so/1303628/

Answer 4

Für die Sidebar:

Stellen Sie Ihr Bild display:block; den zusätzlichen Platz zu entfernen. Wegen Ihrer anderen Stile müssen Sie entweder auch clear:both; zum Bild hinzufügen oder den Float auf Ihrem oberen ul wegnehmen (alles, was es tut, ist das Löschen der floated li 's, die Sie mit overflow:hidden; stattdessen tun können).

Für den Hover-Text:

Sie müssen separate Absätze verwenden padding zu bekommen, aber das ist einfach in WP zu tun. Sie brauchen nicht die zusätzliche <br /> am Ende jeden, wenn Schwimmer anstelle der Anzeige:

.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; 
} 

Natürlich würde ich die display: inline; auch überall lassen Sie schweben. Es kümmert sich um den doppelten float-margin Bug IE5/6. Aber das ist ein anderes Thema.

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

Bilder Standard ist Baseline vertikale Ausrichtung, die für Text Unterlängen Raum verlässt: