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 eine Marge von ein paar Pixel nach unten hinzufügt. Dies geschieht nur, wenn ich es Links zu einer URL.

2. Prolongation ein Bild den Text, um zu sehen, die markiert ist. Dies funktioniert gut, außer ich möchte etwas Padding bis zum Ende der Linien hinzuzufügen. Normaler CSS padding gilt nur zu Beginn und am Ende der P-Tags. Mein Code muss wie folgt formatiert werden: (es sei denn, jemand weiß, wie man diesen Effekt zu übertölpeln mit jeder Zeile eines Absatz-Tag zu sein

Sorry für die Formatierung, 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 Ihres Banner Bild loszuwerden, benutzen Sie:

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

Bilder Standard vertikale Ausrichtung ist die Basislinie für Text Unterlängen Raum verlässt.

Answer 2

Für die Seitenleiste:

Stellen Sie Ihr Bild display:block; den zusätzlichen Platz zu entfernen. Aufgrund Ihrer anderen Stilen werden Sie auch als auch entweder clear:both; auf das Bild, um hinzuzufügen, oder den Schwimmer auf dem oberen ul wegnehmen (alle es tut ist es, die schwebte li des löschen, die Sie tun können, mit overflow:hidden; statt).

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ätzlichen <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 das display: inline; verlassen und überall Sie schweben. Es kümmert sich um den IE5 / 6 verdoppelt Schwimmer margen Bug. Aber das ist ein anderes Thema.

Answer 3

Sie müssen jede Zeile in einem Element wickeln. Eine Spanne wäre eine gute Wahl sein:

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

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

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

.cover span {
   padding:5px;
}

Answer 4

Es soll möglich sein, dies zu tun, mit jeder Zeile eines

zu sein, aber Sie werden einen zusätzlichen
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;
    }

Ich lud eine Demo von dieser hier: http://demo.raleighbuckner.com/so/ 1303628 /