如何在CSS中創建所有兼容瀏覽器的垂直縮進樣式

Question

我發現的唯一一件事;

.hang { 
    text-indent: -3em; 
    margin-left: 3em; 
} 

這個工作是把文本段落中，這將導致那些可怕的難看的額外線的唯一途徑。我寧願讓他們在<span class="hang"></span>類型的事情。

我還在尋找一種進一步縮進的方法，而不僅僅是單層掛起。使用段落堆疊凹痕不起作用。

Answer 1

<span>是內聯元素。 懸掛縮進這個詞是沒有意義的，除非你在談論段落（通常意味着塊元素）。當然，您可以更改<p>或<div>或任何其他塊元素的邊距，以消除段落之間的額外垂直空間。

你可能想要類似display: run-in，其中標記將成爲塊或內聯取決於上下文......不幸的是，這是not yet universally supported by browsers。

Answer 2

找到一個很酷的方式來做到這一點，減去討厭的跨度。

p { 
    padding-left: 20px; 
} 

p:first-letter { 
    margin-left: -20px; 
} 

尼斯和簡單的：d

如果換行被困擾你的P個塊，你可以添加

p { 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 

JSFiddle Example

Answer 3

YSTH的回答是最好的一個有爭議的除外;度量單位應該對應於字體的大小。

p { 
    text-indent: -2en; 
    padding-left: 2en; 
} 

「3」也能很好地工作;不推薦使用「em」，因爲它比字母集中的平均字符寬。只有在打算使用不同字體大小的文本塊對齊時才應使用「px」。