CODEWITHSUNDEEP
htmlcss
Snote
Snote

Reputation: 955

HTML list with space


I have to two list side by side. In one list I want to have some space between two li (an empty li).
For example I want somthing like this

A    B
A    B
A    
A    B

I just put an empty li and it works.
But I want to remove the bullet so in the css I add list-style-type: none; but this remove the space and I get something like this :

A    B
A    B
A    B
A

How can I do?

Upvotes: 1

Views: 88

Answers (2)

Mr Lister
Mr Lister

Reputation: 46579

Add min-height:1em to the style for the li.

Edit: wait, 1em only works if the line-height is 100%. Make sure the min height is the same as the calculated line height (for example, by setting the line-height to 100%).

Upvotes: 1

mat
mat

Reputation: 1629

li
{
    list-style-type: none; // Removes bullet  
    min-height: 12px; // Font size you're using
    padding: 1px; // Add extra padding or margin if needed
}

or a dirty method using an empty spacer (not recommended)

list-style-image:url('spacer.gif');

Upvotes: 1

Related Questions