Support » Fixing WordPress » How to remove space between a paragraph and unordered list

  • I have the same issue with alot of websites and thought someone here could help.

    Is there a way to remove the space between a paragraph and an unordered list? As a generic example look at my test site:

    https://www.chicagostaycation.com/

    Thanks in advance for any assistance!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Steve Stern

    (@sterndata)

    Support Team Volunteer

    You appear to have an extra <p></p> after your paragraph before the list:

    http://i.imgur.com/OBfvsZQ.png

    @sterndata

    Thanks for catching that! I removed the extra paragraph and because I am using 4.8.1 I changed the 2 widgets to “Custom HTML”

    If you take another look the space is still there for the unordered list and the two ordered lists.

    Am I missing something in the html or CSS to get rid of this space?

    It’s not what is after the P but the P itself.

    There is no specific CSS for the class textwidget and the HTML element P.

    Define it in CSS with this very basic example:

    
    .textwidget p {
    margin:0;
    }
    

    @swansonphotos thanks for the reply!

    I am new to WP so was trying to understand how this additional CSS will remove the space between the sentence and the unordered list? What margin are you setting to zero?

    Thanks in advance for any help!

    I use Chrome’s Dev Tools to Inspect the elements in question here. I saw that the paragraph element has default CSS of:

    
    p {
        margin: 0 0 1.625em;
        padding: 0;
    }
    

    I then saw that this CSS was being applied in your situation as no other rules were there.

    CSS is not just related to WordPress but to all modern websites. You can learn more about CSS at:

    https://www.w3schools.com/css/

    Thanks so much!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to remove space between a paragraph and unordered list’ is closed to new replies.