CSS：如何擺脫段落第一行的額外空間？

將PSD轉換爲CSS時，PSD的line-height屬性與CSS不同。CSS：如何擺脫段落第一行的額外空間？

在CSS中，line-height從文本中心展開，但在Photoshop中，line-height從一行的頂部到下一行。

HTML

<div> 
    <p>123436548568</p> 
    <p>123436548568</p> 
</div>

CSS

p{ 
    font-size: 20px; 
    line-height: 40px; 
} 
div{ 
    background-color: grey; 
}

我只是想擺脫這部分：

enter image description here

Codes in CodePen

來源

2014-02-21 cqcn1991

@ShivanRaptor之後應用是什麼意思呢？ – cqcn1991

您的'行高'CSS會產生間距。只要刪除它。 – Raptor

是，在Photoshop中使用的leading從CSS的line-height行爲不同。你可以使用一些CSS掛羊頭賣狗肉，以產生相同的結果：

p { 
    font-size: 20px; 
    line-height: 1;  /* this makes the line box is 20px tall */ 
    padding-top: 0; 
    padding-bottom: 20px; /* add top and bottom padding to create a gap */ 
}

如果結果是關閉的幾個像素，分發頂部和底部之間的20像素的填充，直到你得到像素完美的結果。

作爲替代解決方案;將段落偏移幾個像素頂部，以使文本頂部與框頂部對齊。即使文本分成多行，該解決方案也能正常工作。

p { 
    font-size: 20px; 
    line-height: 40px; 
    position: relative; /* using relative positioning */ 
    top: -10px;   /* shift few pixels above the normal position */ 
}

Demo here

來源

2014-02-21 07:54:27

我想補充一點，你應該使用'margin'而不是'padding'作爲垂直邊距摺疊 - 這樣可以在段落前後設置空間而不用擔心段落之間的雙重空格。 – Keith

是的，但是對於這種特殊情況需要填充（例如，如果使用2px/18px頁邊距，它們會摺疊爲18px，而需要20px的間距）。 –

您可以使用line-height: auto或刪除line-height財產

來源

2014-02-21 07:17:39 vsgoulart

但我需要行高屬性。在這裏，我只是誇大的價值，以顯示第一行的額外間距 – cqcn1991

你不能使用'margin-bottom'只有元素下面的空間？ – vsgoulart

可能不會，因爲它關於**段**，而不是**塊**。邊距不適用於段落每一行的「行高」。 – cqcn1991

在你的代碼可以添加一個類

.no-margin { margin: 0; }

或

p { margin: 0 }

但它看起來像你的行高問題。你需要減少它。即使刪除邊距後，您的示例也不起作用，因爲線條高度很大。第一個解決方法是如果你想進一步減少它。

來源

2014-02-21 07:18:42

我需要自定義行高。我在這裏使線高度如此之大以說明第一線的額外空間。我只是想知道如何擺脫它。這應該與'margin'無關' – cqcn1991

我不確定您想要做什麼的完整背景，但是如果您只希望第一個元素的空間更少，可以添加div> p：first-child {行高：20像素; }在你的p標籤樣式之後。很明顯，編輯高度，以任何你想要的。 –

與重置你的CSS：

* { margin:0; padding:0; }

使用this to reset默認屬性瀏覽器

來源

2014-02-21 07:19:09 Era

*旁註：*不要使用'*'選擇器。 – Raptor

真的很差的做法使用* –

告訴我的原因？ – Era

的文本是低的，因爲您添加的line-height它，不知它是不可能來設置這個陰性切緣或填充的原因。

Selected text

來源

2014-02-21 07:56:42

line-height不垮 - 每條線將是高度，無論內容之前或之後，類似於線高度在任何文字處理器或DTP設置。

但是，如果使用margin垂直空間摺疊，那麼可以使用它作爲前面的空格和後面的空格。

所以下面：

p { 
    font-size: 20px; 
    line-height: 30px; 
    margin-top: 5px; 
    margin-bottom: 10px; 
}

會產生：

後

20px的字體大小
1.5線高度
5px的第一款之前空間
10px的空間的最後段落和段落

而且也：

的第一週緣將外div
最後的保證金之前應用將外div

來源

2014-02-21 08:38:31 Keith

CSS：如何擺脫段落第一行的額外空間？

回答

相關問題