Удалить пробел между абзацем и неупорядоченным списком

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

Как удалить вертикальное пространство между абзацем и списком.

Чтобы быть более конкретным - как уменьшить нижнее поле/дополнение к тегу p ТОЛЬКО, когда следует неупорядоченный список. Все ответы, которые я вижу здесь, удаляют пространство после всех p-тегов - это не то, что было задано.

Ответ 1

Вы можете использовать селектор CSS так, как показано ниже:

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

Это может быть полезно, потому что p + ul означает выбор любого элемента <ul> после элемента <p>.

Вам придется адаптировать это значение к тому, сколько отступов или полей у вас есть в тегах <p>.

Оригинальный ответ на исходный вопрос:

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

Это займет какое-то дополнительное пробел.

p, ul {
    display: inline;
}

Это сделает все элементы inline вместо блоков. (Так, например, <p> не приведет к разрыву строки до и после него.)

Ответ 2

Один из способов - использовать непосредственный селектор и отрицательный запас. Это правило будет выбирать список сразу после абзаца, поэтому он просто устанавливает отрицательный верхний край.

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

Ответ 3

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

Если это не то, что вы ищете, вам нужно быть более конкретным

Ответ 4

Этот простой способ работал отлично для меня:

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

Ответ 5

Вы можете (A) изменить разметку, чтобы не использовать абзацы

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

Или (B) измените css

p{margin:0px;}

Демо здесь: http://jsfiddle.net/ZnpVu/1

Ответ 6

У каждого браузера есть стили по умолчанию, которые применяются к нескольким элементам HTML, нравится p и ul. Пространство, о котором вы упоминаете, вероятно, создано из-за поля по умолчанию и заполнения вашего браузера. Вы можете reset их:

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

Вы также можете reset все поля по умолчанию и paddings:

* { margin: 0; padding: 0; }

Я предлагаю вам взглянуть на normalize.css: http://necolas.github.com/normalize.css/

Ответ 7

Я получил неплохие результаты с моим списком рассылки HTML, используя следующее:

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

Это не reset все значения маржи, а только те, которые создают такой пробел перед упорядоченным списком, и все еще не предполагают никаких значений по умолчанию.

Ответ 8

В итоге я использовал список определений с неупорядоченным списком внутри него. Он решает проблему нежелательного пространства над списком, не изменяя каждый абзац абзаца.

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