lien CSS espacement et espacement des paragraphes

Question

Voici le site:

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

1. L'image de la bannière sur le côté qui dit S & photographie S ajoute une marge de quelques pixels vers le bas. Cela ne se produit que lorsque je le relie à une URL. Survolez une image pour voir le texte mis en évidence.

2. Cela fonctionne très bien, sauf que je voudrais ajouter un peu de remplissage à la fin des lignes. Le remplissage CSS normal ne l'applique qu'au début et à la fin des balises P. Mon code doit être formaté comme ceci: (à moins que quelqu'un sait comment duper cet effet chaque ligne étant une balise de paragraphe

Désolé pour la mise en forme, l'éditeur ne me laissera pas mettre le code sur les lignes multiples pour une raison quelconque .

<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

Pour se débarrasser de l'espace supplémentaire au bas de l'image de votre bannière, utilisez:

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

images par défaut alignement vertical est la ligne de base qui laisse place à descendeurs texte.

Answer 2

Vous aurez besoin d'envelopper chaque ligne dans un élément travée serait un bon choix..

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

Vous pouvez ensuite ajouter votre rembourrage aux éléments de portée

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

.cover span { 
    padding:5px; 
} 

Answer 3

Vous devriez être en mesure de le faire avec chaque ligne étant un <p>, mais vous devrez ajouter un < supplémentaire br > à la fin de chacun:

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

Je téléchargé une démo de cette h avant: http://demo.raleighbuckner.com/so/1303628/

Answer 4

Pour la barre latérale:

Définissez votre image display:block; pour supprimer l'espace supplémentaire. En raison de vos autres styles, vous devrez également ajouter soit clear:both; à l'image ou enlever le flotteur sur votre dessus ul (tout ce qu'il fait efface les li floated, que vous pouvez faire en utilisant overflow:hidden; à la place).

Pour le texte de vol stationnaire:

Vous devez utiliser des paragraphes distincts pour obtenir un rembourrage, mais qui est facile à faire dans WP. Vous n'avez pas besoin <br /> supplémentaire à la fin de chaque si vous utilisez flottant au lieu de l'affichage:

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

Bien sûr, je quitterais le display: inline; aussi bien partout où vous flottez. Il prend en charge le bogue IE5/6 à marge flottante doublée. Mais c'est un problème différent.