Cheap Shared Hosting

Tuesday, December 18, 2007

1st Post! How to remove the spacing above an unordered bullet list using CSS

This will hopefully be the first of many posts where I plan to post quick little tips to help all my fellow web developers out there in the big ol' Internet.

This one is to fix what's occasionally an annoying "feature" of HTML - about a line of space is added by default between an unordered bullet list and the paragraph above it. This can look a little funny sometimes, especially if you're using the paragraph as header above the unordered list.

To fix this, add two new classes to your CSS:
    p.ulHeader { margin-bottom: 0px; }
    ul.noTopMargin { margin-top: 0px; }
Then you can just add those classes to the appropriate places in your code to remove that pointless spacing.

No comments: