How to remove space between paragraph and specific html list

Question

How do I remove space between paragrah and a specific html list? Based on image provided, I want the list to be moved up closer to the paragrah:

<p><strong>Reason</strong><br/>
As part of the change from the NHS, the following drugs are unable to be prescribed by the doctor and requires a special consultant to prescribe these medications:
    <ul class="nospaceabovelist">
        <li>Clonazepam</li>
        <li>Imitrex</li>
        <li>Amoxil</li>
        <li>Sensipar</li>
    </ul>
</p>

p + .nospaceabovelist li{
    margin: 0;
    padding:0;
  }

A list can't be nested into a paragraph but your css selector is looking for a list following a paragraph. Make it as a sibling, then set its margin. — Fabrizio Calderan, Feb 25 '20 at 11:31

score 0 · Accepted Answer · answered Feb 25 '20 at 11:41

0

Paragraphs cannot contain ul so you need to change the HTML.

Then just remove margins from both.

  p, p + .nospaceabovelist {
  margin: 0;
  padding: 0;
}

<p><strong>Reason</strong><br/> As part of the change from the NHS, the following drugs are unable to be prescribed by the doctor and requires a special consultant to prescribe these medications:</p>
<ul class="nospaceabovelist">
  <li>Clonazepam</li>
  <li>Imitrex</li>
  <li>Amoxil</li>
  <li>Sensipar</li>
</ul>

answered Feb 25 '20 at 11:41

Paulie_D

102,164
10
117
144

This seems like best solution but only issues is that it affects other paragraphs, is there a way to only affect this paragraph only? – BruceyBandit Feb 25 '20 at 11:50
Nope, you can't style an element based on what follows it. – Paulie_D Feb 25 '20 at 11:58

score -1 · Answer 2 · answered Feb 25 '20 at 11:37

i think you search this :)

<html>
<head>

<style>
p
{
  margin: 0;
  padding:0;
  line-height: .75em;
}
ul
{
  margin: 0;
}

</style>
</head>
<body>
      <p><strong>Reason</strong><br/>
                As part of the change from the NHS, the following drugs are unable to be prescribed by the doctor and requires a special consultant to prescribe these medications:
                <ul>
                <li>Clonazepam</li>
                <li>Imitrex</li>
                <li>Amoxil</li>
                <li>Sensipar</li>
                </ul>
            </p>
</body>
</html>

score -2 · Answer 3 · edited Feb 25 '20 at 12:36

-2

Add this in css:

p {
    margin: 0;
}

ul {
    margin: 0;
}

edited Feb 25 '20 at 12:36

cjol

1,420
10
24

answered Feb 25 '20 at 11:37

Sachin M

1

These selectors are very general - although adjusting the margin is probably the right approach, you should specify more specific selectors instead of adjusting all margins across all `p`s and `ul`s. – cjol Feb 25 '20 at 11:42

How to remove space between paragraph and specific html list

3 Answers3