?
Solved

CSS Margin on <ul>

Posted on 2014-01-15
2
Medium Priority
?
318 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
[X]
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
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month11 days, 11 hours left to enroll

752 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