CSS(Cascading Style Sheets)是一種用于描述網(wǎng)頁樣式和排版的語言。在 CSS 中有一個(gè)非常有用的屬性——line-height
,可以設(shè)置文本行與行之間的距離。但在某些情況下,我們希望在一段文字中保留兩行空白,并讓這兩行的行距不同于其他行。這時(shí),我們可以使用 CSS 中的margin
屬性來實(shí)現(xiàn)。
p { margin: 0; line-height: 1.5; } p.two-empty-lines { margin: 0; line-height: 3; display: block; &:before { content: " "; display: block; margin-top: -1.5em; height: 1.5em; } &:after { content: " "; display: block; margin-bottom: -1.5em; height: 1.5em; } }
以上是一個(gè)簡單的 CSS 段落樣式。當(dāng)我們希望在一段文字中保留兩行空白時(shí),可以使用.two-empty-lines
類,然后利用:before
和:after
偽類元素添加兩個(gè)空白的塊元素,從而實(shí)現(xiàn)兩行空白的效果。
使用-1.5em
的margin-top
和margin-bottom
值來調(diào)整兩行空白的位置,同時(shí)設(shè)置height: 1.5em;
來確保塊元素的高度與行距一致,這樣就可以實(shí)現(xiàn)兩行空白,而且這兩行的行距也和其他行不一樣了。
希望這個(gè)小技巧能夠幫助你實(shí)現(xiàn)更加優(yōu)雅的樣式。