CODEWITHSUNDEEP
htmlcss
edbird88
edbird88

Reputation: 128

height from list items

I have a div with a list inside. I want to know what's the css property to control the space between the lines from the same list item.

enter image description here

Upvotes: 0

Views: 797

Answers (3)

Nabeel Khan
Nabeel Khan

Reputation: 3993

As you're using list items <li>, you can use this code to give your each list item a height:

li {
    height: 100px;
}

You can also give your div a specific id or class and then use it as reference too so that not all li in your code get that style applied.

You can also give each li a class too.

E.g.:

li.myclass {
    height: 100px;
}

jsfiddle for this: https://jsfiddle.net/rmnd22uh/

li{
  height: 100px;
}
<div>
  <ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
  </ul>
</div>

I hope this helps.

P.S. you need to learn a lot about html / css, so start learning from w3schools or any other resource.

Upvotes: 2

melvin
melvin

Reputation: 2621

Try line-height for the list items. The line-height property specifies the height of a line. So by adding this css property, you could get what you require.

Sample code 

<html>
  <head>
    <style>
      ul li{
        line-height:50px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>text1</li>
      <li>text2</li>
      <li>text3</li>
    </ul>
  </body>
</html>

demo fiddle here

Upvotes: 1

Johnny Ngo
Johnny Ngo

Reputation: 104

At first, set your div a valid id.

Next, use Javascript:

    var element = document.getElementById('<your div ID>'),
    style = window.getComputedStyle(element),
    height = style.getPropertyValue('height');

Wish it would help.

Upvotes: 0

Related Questions