Интервал списка CSS после абзаца

Question

Если у меня есть пользовательский контент, такой как:

<p>my paragraph</p>
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>

Выводится с пропуском абзаца между концом абзаца и списком следующим образом:

мой абзац

• item1
• item2

Я знаю, что могу избавиться от пробела в моем CSS, установив margin-top на теге UL и margin-bottom на теге p, но есть ли способ сделать это, не затрагивая поля между фактическими абзацами.

Контент генерируется пользователем с ограниченным набором доступных тегов и без шрифтов, размеров ... доступных, поэтому все форматирование должно выполняться в CSS, если это возможно, без необходимости помещать классы в теги.

EDIT: Должен был сказать, что знаю из-за того, как в CSS работает свертывание полей, я обычно могу установить

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

Разделение было бы правильным в обоих случаях, поскольку свойство margin-top для тега p по-прежнему будет равно 1, но я уже установил margin-top на 0,2em для меньшего разрыва между тегами h2 и p.

Answer 1

Это идеальный вариант использования для выбора родного брата. Однако это не работает в IE6 или IE7.

p { margin: 0; }
ul { margin-top: 0; margin-bottom: 0; }
p + p { margin-top: 15px; }
p + ul { margin-top: 3px; }
ul + p { margin-top: 3px; }

Итак, что здесь происходит, я устанавливаю соответствующие поля равными 0 для p и ul, а затем говорю всем совместимым браузерам искать p после p и добавлять к нему верхнее поле. То же самое для ul после p (хотя это небольшое поле) и p после ul (снова большое поле).

Опять же, это не работает в IE6 и 7, поэтому вы можете использовать условные комментарии, чтобы получить достойный (если не идеальный) вид в этих браузерах.

Answer 2

Если вы хотите настроить таргетинг на ul элементы, используйте соседний селектор брата.

p + ul { margin-top: 0; }

Нет подходящего способа установить нижнее поле p таким образом, но вы можете использовать отрицательныйнаценка на ul при необходимости.

Answer 3

Другие ответы работают хорошо, опять же, как они сказали, за исключением IE6 / 7.Однако следует понимать, что вы не будете влиять на поля между абзацами, если вы установите нижнее поле p равным 0, если вы установите верхнее поле для p, которое будет больше, чем два значения, которыми в настоящее время являются ваши поля.Пока у вас нет проблем с установкой верхнего поля ul на 0, интервал p не будет затронут.Допустим, вы определили это на данный момент:

p {margin: 10px}

Установите его так:

p {margin: 10px 10px 0}

Не повлияет на ваше поле между p тегами (которыекажется, вас беспокоит), так как нижнее поле 10px разрушается вместе с верхним, чтобы сделать разрыв только 10px.Если ваша нижняя граница в настоящее время установлена ​​больше, чем верхняя граница, вам нужно изменить верхнюю границу на большее значение, чтобы увидеть тот же интервал, что и вы.Теперь, если вам нужно какое-то нижнее поле на последнем p, вам придется учесть это.

Если то, что пользователь вводит, заканчивается в определенной оболочке div, которую вы можете выбрать (через id или class), тогда вы можете просто установить эти стили для p и ul, чтобы они применялись только внутри этой оболочки, если это вызывает озабоченность.

Answer 4

Если у вас есть конструкция, как показано ниже:

<p>my paragraph</p>
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>

И CSS, как:

p { margin: 0 0 25px 0; }

, это может вызвать разрыв между P и LIST.эта проблема с использованием отрицательного поля:

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

Answer 5

Это зависит от остальной части вашего кода, но вы должны сделать это:

p{ margin-bottom:0; }

Вы можете подумать, что это повлияет на все остальные ваши абзацы, но из-за CSS "«С полем сворачивания» эта функция на самом деле не должна - при условии, что вы находитесь в режиме стандартов с действительным DOCTYPE.

Дайте мне знать, если вам нужно больше объяснений - или оно не работает.