rimuovere lo spazio tra il paragrafo e l'elenco non ordinato

Question

<p>Text</p> 
<ul> 
    <li>One</li> 
</ul> 
<p>Text 2</p> 

Come rimuovere lo spazio verticale tra il paragrafo e l'elenco.

Per essere più specifici, come ridurre il margine inferiore/riempimento del tag p SOLO se seguito da un elenco non ordinato. Tutte le risposte che vedo qui rimuovono lo spazio dopo tutti i tag p - non è quello che è stato chiesto.

Answer 1

è possibile utilizzare selettori CSS in un modo simile al seguente:

p + ul { 
    margin-top: -10px; 
} 

Questo potrebbe essere utile perché p + ul mezzi selezionare qualsiasi elemento <ul> dopo un elemento <p>.

Dovrai adattare questo valore a quanto di padding o margine hai sui tuoi tag <p> in generale.

risposta originale alla domanda iniziale:

p, ul { 
    padding: 0; 
    margin: 0; 
} 

che prenderà ogni spazio bianco EXTRA via.

p, ul { 
    display: inline; 
} 

Ciò renderà in linea tutti gli elementi anziché i blocchi. (Quindi, ad esempio, <p> non causerà un'interruzione di riga prima e dopo di essa.)

Answer 2

p, ul{ 
    padding:0; 
    margin:0; 
} 

Se questo non è quello che cercate dovrete essere più specifico

Answer 3

Si può (A) cambiare il markup di non usare i paragrafi

<span>Text</span> 
<br> 
<ul> 
    <li>One</li> 
</ul> 
<span>Text 2</span> 

O (B) il cambiamento il css

p{margin:0px;} 

Demos qui: http://jsfiddle.net/ZnpVu/1

Answer 4

Ogni browser ha alcuni stili predefiniti che si applicano a un numero di elementi HTML, come p e ul. Lo spazio che si menziona è probabilmente creato a causa del margine predefinito e del riempimento del browser. È possibile ripristinare questi però:

p { margin: 0; padding: 0; } 
ul { margin: 0; padding: 0; } 

si potrebbe anche ripristinare tutti i margini predefiniti e padding:

* { margin: 0; padding: 0; } 

vi consiglio di dare un'occhiata a normalize.css: http://necolas.github.com/normalize.css/

Answer 5

Ho finito per usare una lista di definizioni con una lista non ordinata al suo interno. Risolve il problema dello spazio indesiderato sopra l'elenco senza dover modificare ogni tag di paragrafo.

<dl><dt>Text</dt> 
<dd><ul><li>First item</li> 
<li>Second item</li></ul></dd></dl> 

Answer 6

Un modo utilizza il selettore immediato e il margine negativo. Questa regola selezionerà una lista subito dopo un paragrafo, quindi è sufficiente impostare un margine negativo in alto.

p + ul { 
    margin-top: -XX; 
} 

Answer 7

ho ottenuto buoni risultati con la mia mailing list HTML utilizzando il seguente:

p { margin-bottom: 0; } 
ul { margin-top: 0; } 

Questo non azzera tutti i valori dei margini, ma solo quelli che creano un tale divario prima lista ordinata, ed ancora non assume nulla riguardo ai valori di margine predefiniti.

Answer 8

In questo modo semplice funzionato bene per me:

<ul style="margin-top:-30px;">