Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Spacing between bullet list rows

Tags:

html

css

How do I set the spacing between bullet lists?

  • asdfasdf
  • asdf23223

I want to put a little more space between the first and second rows like

<ul>
    <li>asdfasdf</li>
<p />
    <li>asdf23223</li>
</ul>
like image 920
iefpw Avatar asked Mar 27 '13 17:03

iefpw


People also ask

Should you have a space between bullet points?

Normally, you'd use periods and commas to separate the sentences or semi-independent sentence parts and keep your text easy to follow. But your bullet points are already separated from each other – by a new line and spacing in between. So punctuation for the sake of separation makes no sense.

How do I reduce the space between bullet points and text?

Right-click, and then click Adjust List Indents. Change the distance of the bullet indent from the margin by clicking the arrows in the Bullet position box, or change the distance between the bullet and the text by clicking the arrows in the Text indent box.

How do you add space between bullet points in HTML?

To create space between list bullets and text in HTML, use CSS padding property. Left padding padding-left is to be added to <ul> tag list item i.e. <li> tag. Through this, padding gets added, which will create space between list bullets and text in HTML.


2 Answers

Add top and bottom padding to the lis, like so:

ul li { padding: 5px 0px; }

And take out that crazy looking <p /> tag.

Demo: http://jsfiddle.net/aFED2/

like image 140
mattytommo Avatar answered Sep 22 '22 06:09

mattytommo


You might be able to do something like this:

<ul style="line-height:1.4;">
like image 23
Mike Schwartz Avatar answered Sep 23 '22 06:09

Mike Schwartz