字母间距和行高，不仅影响了文本元素

我定义的主样式表（我的项目的默认CSS）是这样的：字母间距和行高，不仅影响了文本元素

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; 
}

letter-spacing和line-height完美。但是，我发现它们中的两个也会影响ul-li元素。我希望它们只影响文本而不是ul-li或任何其他元素。

字母间距和行高有什么副作用，我不知道？如果是这样，我怎么才能使行高和字母间距只影响文本？

来源

2011-02-10 soredive

随着主体定义你申请你的风格在你的页面的所有元素。尝试找出所需的文本元素，如DIV，A，跨度等，并作出新的CSS项是这样的：

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; 
}

或申请一个单独的样式与特定的关键是你的文本元素。

来源

2011-02-10 12:04:58 menty

为什么不只是将你的UL LI元素重新设置回正文样式后的默认行高？

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; 
}

来源

2011-02-10 11:58:41 corroded

同@Spudley。测试它：http://jsfiddle.net/inti/tSxzS – aorcsik 2011-02-10 12:39:36

现在编辑它:) – corroded 2011-02-10 15:17:53

可以定义为仅<p>标签的CSS，并把所有的文本在p元素：

p { 
    line-height:1.5; 
}

来源

2011-02-10 11:59:06 Sjoerd

这可能是一个比`body`全局设置更好的想法，然后取消特定元素的设置：只需为元素设置它或页面部分您实际上想要使用它。 – Spudley 2011-02-10 12:00:51

但是，我发现他们两个影响UL-li元素太。

所以，只需使ul/li元素的另一个选择器将其设置恢复正常即可。

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

来源

2011-02-10 11:59:16 Spudley

您可以设置line-height和letter-spacing回normal上li元素：

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

来源

2011-02-10 12:02:58 aorcsik

字母间距和行高，不仅影响了文本元素

回答

相关问题