Letter spacing and line-height not only affecting text elements

I defined main stylesheet (default CSS of my project) like this:

body {
    color: #000000;
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-size: 0.75em; /* 12px */
    line-height: 1.5; /* font-size:1(12开发者_JS百科px) + line-space:0.33(4px) = 16px */
    letter-spacing: 0.03em;
}

letter-spacing and line-height works perfectly. but, I found that two of them affect ul-li elements too. I want that they affect text only not ul-li or any other elements.

Is there any side-effect on letter-spacing and line-height which I don't know? If so, how could I make line-height and letter-spacing affect text only?

With the body definition you apply your style to all elements in your page. Try to identify the desired text elements like div, a, span, etc. and make a new css entry like this:

body {
    color: #000000;
    text-align:center;
    margin: 0px;
    padding: 0px;
    font-size: 0.75em; /* 12px */
}
div, a, span {
    line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
    letter-spacing:0.03em;
}

or apply a seperate style with specific key to your text elements.

You can define the CSS for the <p> tag only, and put all texts in a p element:

p {
    line-height:1.5;
}

but, I found that two of them affect ul-li elements too.

So just make another selector for ul/li elements that sets it back to normal.

ul, li {
    letter-spacing:0em;
    line-height:1;
}

You can set the line-height and letter-spacing back to normal on li elements:

li {
    letter-spacing: normal;
    line-height: normal;     /* this is actually 0em */
}

Why not just reset your ul li elements back to the default line-height after the body style?

body {
  color: #000000;
  text-align:center;
  margin: 0px;
  padding: 0px;
  font-size: 0.75em; /* 12px */
  line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
  letter-spacing:0.03em;
}

ul, ul li {
  line-height: 1;
  letter-spacing: 0em;
}