最低高度爲格或跨度空元素

當我內span或div恰好是空字符串或僅包括空格，該部分不具有任何高度，並且當該span或div是進一步的字符串包圍嵌入到像table之類的東西中，該單元沒有足夠的高度，並且看起來不正確。如何確保span或div至少佔用字符串其他字符的高度？這就像TeX中的\strut。我可以插入一些東西到字符串中，或者調整CSS。最低高度爲格或跨度空元素

我試過了，將以下內容放入相關的css類中，但問題是我必須手動調整字符串高度（我不確定它是否爲「1em」，可能不是）。什麼是正確的方法來做到這一點？

min-height：1em;

來源

2012-01-01 sawa

如果它是一個跨度，你將需要添加「顯示：塊;」它接受高度值。默認情況下，它以內聯方式顯示。我還建議，如果這是在一張桌子裏，專門分配最小高度到標籤，並使整個行高度相同。 – wwwroth 2012-01-01 18:21:30

你span元素需要，如果你想設置它的高度，成爲一個塊級元素。因此，根據情況設置display: block或display: inline-block的樣式。

span.item { 
    display: inline-block; 
}

要設置空跨度的高度，我發現最好簡單地注入 而非設置最小高度。（UPDATE：每@sawa，而不是使用一個非中斷空格字符，或許更合適的字符會佔用沒有空間，即Unicode零寬度空格字符，\200b）

span.item:empty:before { 
    content: "\200b"; /* unicode zero width space character */ 
}

這將適用於任何字體大小，並且避免了與基線不匹配相鄰文本的問題。看看那句「嗯？」的句子如下：

how baseline fails

http://plnkr.co/edit/GGd7mz?p=preview

（見類似的問題：https://stackoverflow.com/a/29354766/516910）

來源

2015-03-30 19:57:06

'「\ 00a0」'（' '）佔據水平空間。我認爲''\ 200b「'（''）更好 – sawa 2015-03-31 06:23:28

@sawa同意，'」\ 200b「'給予文本的存在，同時完全不可見。 – 2015-03-31 18:05:43

不推薦使用八進制轉義序列。改用'\ u200b'。 – 2016-04-18 20:24:16

您的代碼不正確：您不需要在CSS中圍繞值（「」）。

要麼使用：

min-height: 1em; /* I am not sure if one can use em with height properties */

或使用：

min-height: 12px;

來源

2012-01-01 06:07:26

這只是我的錯字。其實，它沒有引用，'em'可用。我用不同的'em'值檢查了它，並且它工作。問題是我需要手動調整它。 – sawa 2012-01-01 06:43:07

您可以設置表格柱的min屬性。否則，你必須手動管理它。此外，這是一種好的行爲，不要單獨做任何事情。否則你可能會有奇怪的結果:-) – 2012-01-01 06:58:44

謝謝。我想接受你答案的評論部分。 – sawa 2012-01-01 07:10:40

最低高度爲格或跨度空元素

回答

相關問題