ligação CSS espaçamento e espaçamento entre parágrafos

Question

Aqui está o site:

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

1. A imagem de banner no lado que diz fotografia S & S acrescenta uma margem de alguns pixels para o fundo. Isso só acontece quando eu ligá-lo a uma URL.

2. Rollover uma imagem para ver o texto que está destacado. Isso funciona muito bem, exceto eu gostaria de adicionar algum estofo para o final das linhas. Normal estofamento CSS só se aplica para o início eo fim das tags P. Meu código precisa ser formatado como este: (a menos que alguém sabe como enganar esse efeito com cada linha sendo uma tag de parágrafo

Sorry for a formatação, o editor não me deixa colocar o código em múltiplas linhas por algum motivo.

    <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

Para se livrar do espaço extra na parte inferior da sua imagem bandeira, use:

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

Imagens padrão alinhamento vertical é de linha de base que deixa espaço para descenders texto.

Answer 2

Para a barra lateral:

Defina a sua imagem para display:block; para remover o espaço extra. Por causa de seus outros estilos que você também terá que adicionar qualquer clear:both; à imagem bem ou tirar o flutuador no seu topo ul (tudo o que está a fazer é limpar da li flutuou, o que você pode fazer usando overflow:hidden; vez).

Para o texto em foco:

Você terá que usar parágrafos separados para obter cobertura, mas isso é fácil de fazer em WP. Você não precisa do <br /> extra no final de cada se você usar o flutuador, em vez de 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;
 }

Claro, eu deixaria o display: inline; bem em qualquer lugar você está flutuando. Ela cuida do IE5 / 6 dobrou bug bóia-margem. Mas isso é uma questão diferente.

Answer 3

Você vai precisar para embrulhar cada linha em um elemento. A extensão seria uma boa escolha:

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

Você pode então adicionar o seu estofo para os elementos span.

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

.cover span {
   padding:5px;
}

Answer 4

Você deve ser capaz de fazer isso com cada linha sendo um

, mas você terá que adicionar um
extra no final de cada um:

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 enviou um demo deste aqui: http://demo.raleighbuckner.com/so/ 1303628 /