eliminar espacio entre el párrafo y la lista desordenada

Question

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

Cómo elimino el espacio vertical entre el párrafo y la lista.

Para ser más específicos, ¿cómo puedo reducir el margen inferior/relleno de la etiqueta p SÓLO cuando va seguido de una lista desordenada? Todas las respuestas que veo aquí eliminan el espacio después de todas las etiquetas p; eso no es lo que se preguntó.

Answer 1

Usted puede utilizar selectores CSS de una manera similar a la siguiente:

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

Esto podría ser útil porque p + ul medios seleccionar cualquier elemento <ul> después de un elemento <p>.

Tendrás que adaptar esto a la cantidad de margen o margen que tienes en tus etiquetas <p> en general.

respuesta original a la pregunta original:

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

que se llevará a cualquier espacio en blanco adicional de distancia.

p, ul { 
    display: inline; 
} 

Eso hará que todos los elementos en línea en lugar de bloques. (Entonces, por ejemplo, <p> no causará un salto de línea antes y después).

Answer 2

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

Si eso no es lo que busca que tendrá que ser más específico

Answer 3

Usted puede (A) cambiar el marcado a no utilizar los párrafos

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

o (b) el cambio el css

p{margin:0px;} 

Demos aquí: http://jsfiddle.net/ZnpVu/1

Answer 4

Cada navegador tiene algunos estilos predeterminados que se aplican a una serie de elementos HTML, como p y ul. Es probable que el espacio que mencione se haya creado debido al margen y el margen predeterminados de su navegador. Puede restablecer estos sin embargo:

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

También podría restablecer todos los márgenes predeterminados y juntas:

* { margin: 0; padding: 0; } 

le sugiero que tome un vistazo a normalize.css: http://necolas.github.com/normalize.css/

Answer 5

Terminé usando una lista de definición con una lista desordenada dentro de ella. Soluciona el problema del espacio no deseado por encima de la lista sin necesidad de cambiar cada etiqueta de párrafo.

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

Answer 6

Una forma es usar el selector inmediato y el margen negativo. Esta regla seleccionará una lista justo después de un párrafo, por lo que solo establece un margen negativo superior.

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

Answer 7

me dieron muy buenos resultados con mi lista de correo HTML utilizando la siguiente:

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

Esto no restablece todos los valores de margen, pero sólo aquellos que crean una brecha tan lista antes ordenó, y todavía no supone nada sobre los valores de margen predeterminados.

Answer 8

Esta manera simple funcionó bien para mí:

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