Вертикальное разделение между параграфами в одной и той же маркированной точке в HTML - PullRequest
Новая
       52

Вертикальное разделение между параграфами в одной и той же маркированной точке в HTML

0 голосов
/ 02 мая 2020

Я делаю заметки в текстовом формате и вижу их как HTML. Когда я пишу список (упорядоченный или неупорядоченный), иногда я пишу два абзаца в одной и той же маркированной точке. На дисплее HTML эти абзацы отображаются очень близко друг к другу. Как я могу изменить файл шаблона .css, чтобы увеличить вертикальное разделение между ними?

I это контролируется элементами li, ol и ul, но я не знаю как их точно настроить. Ниже приведен текущий код для этих элементов. 

p, table, ul, ol, dl {margin-top: 1.5em; margin-bottom: 1.5em;}
ul ul, ul ol, ol ol, ol ul {margin-top: 0.5em; margin-bottom: 0.5em;}
li {margin: 1.5em auto; padding: 50px 0px;}
ul {margin-left: 2em; padding-left: 0.5em;}

ol {
  margin:0 0 1.5em;
  padding:0;
  counter-reset:item;
}

ol>li {
  margin:0;
  padding:0 0 0 2em;
  text-indent:-2em;
  list-style-type:none;
  counter-increment:item;
}

ol>li:before {
  display:inline-block;
  width:1.5em;
  padding-right:0.5em;
  font-weight:bold;
  text-align:right;
  content:counter(item) ".";
}

1 Ответ

0 голосов
/ 03 мая 2020

Для разделения между абзацами в пунктах с маркерами, в частности:

ничего другого, просто сделайте это, например: 

li + li{
  margin-top: 60px; /*as per requirement*/
}
<ol>
  <li>It is a long established fact that a reader will be </li>
  <li>It is a long established fact that a reader will be </li>
</ol>

Кроме того, может возникнуть проблема в будущем, если у вас будет много списков маркеров на странице, поэтому просто создайте идентификатор для тега списка маркеров, и вы будете все установить, например: 

#first li + li{
  margin-top: 60px; /*as per requirement*/
}
<ol id="first">
  <li>It is a long established fact that a reader will be </li>
  <li>It is a long established fact that a reader will be </li>
</ol>
...