CSS - 使左+右邊界完全一樣的高度，文字

看看下面的代碼，這是我有一個更大的問題的一個簡化版本：CSS - 使左+右邊界完全一樣的高度，文字

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
     div {border-width:0px 5px; border-style:solid; border-color:black; width:400px; margin:0; padding:0; background:red;} 
     div:nth-child(2) {background:green;} 
     p {color:yellow; text-transform:uppercase; font-size:40px;margin:0;padding:0;} 
</style> 
</head> 
<body> 
<div><p>Hello World</p></div> 
<div><p>Hello World</p></div> 
</body> 
</html>

應該創造一些東西像這樣：

enter image description here

客戶已經要求什麼是黑色的左邊框與黑色的右邊界是完全一樣的高度，黃色文本。也就是說，黑色條的高度不應包括黃色文本的頂部+底部與容器的頂部+底部之間的額外空間。

我能想到的一種方法是在包含div上設置固定高度，然後給div一個溢出：隱藏。接下來，我將在p標籤上使用負邊距頂部。

任何人都可以想出更好的方法嗎？我真的不喜歡我提到的方法，因爲我的客戶端是一個設計納粹，並期望在所有不同的操作系統，不同的瀏覽器和不同的屏幕分辨率下，像素都是像素完美的。根據我的經驗，如果我嘗試通過將像素值硬編碼到我的CSS中來定位元素，並且這些元素仍然需要相對於大小不同的元素（由於動態內容），它可以是夜晚的母馬。

我的擔憂是否值得？如果是這樣，是否有更好的方法使邊界與文本高度完全一樣？

來源

2013-03-24 John

你可以用僞元素來做這樣的事情（沒有< =支持IE8）。請注意，邊框比字體稍大，這只是字體的性質，允許上下方有一點空間（注意兩者都設置爲40px）。這無法真正幫助跨平臺/瀏覽器/等。除非你想製作像素完美的圖像。

jsFiddle

enter image description here

HTML

<div><p class="fancy-border">Hello World</p></div>

CSS

.fancy-border { 
    position:relative; 
} 
.fancy-border:before { 
    content:""; 
    display:block; 
    z-index:-1; 
    position:absolute; 
    height:40px; 
    width:100%; 
    border-width:0px 5px; 
    border-style:solid; 
    border-color:black; 
    top:50%; 
    margin-top:-20px; 
    left:-5px; 
}

來源

2013-03-24 05:02:21

嘿Tyriar，你可能已經注意到了，我不希望「字體允許一小部分空間在上面和下面「。那麼你是說我的兩個選擇是使用圖像還是採用我在問題中提到的方法？我認爲這兩者都是不可維護的做事方式。即使客戶要求它 – John 2013-03-24 14:20:49

也許一個不同的字體將精確繪製。我同意他們是不好的和不可修復的解決方案，但這就是字體的工作方式，因爲您可以看到我們的繪圖尺寸完全相同。 – 2013-03-24 20:49:57

我需要在某些文本前面繪製一個狀態欄，並且此解決方案完美運行。謝謝！ – Bill 2013-11-15 18:37:34

這是你是什麼尋找：

jsFiddle

只需設置容器的高度低於行高度，使得字體佔用其財產，不得高估留下空間。

p{  
font-size:40px; 
line-height:30px; 
}

來源

2013-03-24 14:42:14 bukka

差不多。我將行高改爲27px。文字頂部之間的空白消失了。但是在文本底部有空格。如果我再減少行高，文本的頂部開始溢出。我不希望文本溢出或裁剪。 – John 2013-03-24 14:47:47

將'line-height'設置爲'26px'並添加'padding-top'的'2px'。這應該恰到好處。我用這段代碼更新了上面的jsFiddle。 – bukka 2013-03-24 15:01:57

您是否知道這是否能在所有瀏覽器，操作系統，桌面與移動設備以及屏幕分辨率上呈現完美像素？一旦我回到辦公室，我會做一些測試。因爲我在過去注意到，有時候當你嘗試通過像素完全對齊某些東西時，它可能會關閉，具體取決於您的環境，最終會看到差距。 – John 2013-03-24 15:25:24

給出p標籤的邊界，並設置p的行高度，而且還殘留線之間沒有空格，則它們之間給保證金

來源

2014-07-31 07:52:57 Dennis

CSS - 使左+右邊界完全一樣的高度，文字

回答

相關問題