Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

CSS Margin on <ul>

Posted on 2014-01-15
2
295 Views
Last Modified: 2014-01-16
Can I change the vertical spacing on the HTML <ul> element with the margin property, applied to <ul>?

For example. please look at https://www.whasocal.org/sponsor_benefitst.php.

Note the large amount of white space between the prior text & the start of the <li> items in several places.

If this can't be done with margin on <ul>, how can I do it?

Thanks
0
Comment
Question by:Richard Korts
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39784274
Add to UL {}
margin:0

For the P tag remove the margins (why the negative margin?) and add

margin: 1em 0 .6em 0;

Just tweak the margin as you need.
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39784375
You could use "last-child" to target the last li tag in your list.
For example
li:last-child{padding-bottom:20px}

Open in new window

This will put a nice block of padding under each of your lists and tidy up your spacing a bit..
Cheers,
Neil
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question