html - salto - eliminar espacio entre el párrafo y la lista desordenada

salto de linea html sin br

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 reduzco el margen inferior / el relleno de la etiqueta p SOLAMENTE cuando sigue 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 pidió.

Answer 1

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 mencionas se cree debido al margen predeterminado y al relleno de tu navegador. Puede restablecer estos sin embargo:

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

También puede restablecer todos los márgenes y rellenos predeterminados:

* { margin: 0; padding: 0; }

Le sugiero que eche un vistazo a normalize.css: http://necolas.github.com/normalize.css/

Answer 2

Esta manera simple funcionó bien para mí:

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

Answer 3

Obtuve resultados bastante buenos con mi lista de correo HTML usando lo siguiente:

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

Esto no restablece todos los valores de margen, sino solo aquellos que crean ese espacio antes de la lista ordenada, y aún no asume nada sobre los valores de margen predeterminados.

Answer 4

Puede (A) cambiar el marcado para no usar párrafos

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

O (B) cambiar el css

p{margin:0px;}

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

Answer 5

Puede utilizar los selectores de CSS de una manera similar a la siguiente:

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

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

Tendrá que adaptar esto a la cantidad de relleno o margen que tiene en sus etiquetas <p> general.

Respuesta original a la pregunta original:

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

Eso quitará cualquier espacio en blanco EXTRA.

p, ul {
    display: inline;
}

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

Answer 6

Terminé usando una lista de definiciones con una lista desordenada dentro de ella. Resuelve el problema del espacio no deseado sobre 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 7

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 se establece un margen superior negativo.

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

Answer 8

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

Si eso no es lo que buscas deberás ser más específico.