字母間距和行高，不僅影響了文本元素

我定義的主樣式表（我的項目的默認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

字母間距和行高，不僅影響了文本元素

回答

相關問題