2

次のコードを見てください。これは、私が抱えているより大きな問題の単純化されたバージョンです。

<!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>

次のようなものを作成する必要があります。

ここに画像の説明を入力

クライアントが要求したのは、黒の左枠と黒の右枠を黄色のテキストとまったく同じ高さにすることです。つまり、黒いバーの高さには、黄色のテキストの上部と下部、およびコンテナーの上部と下部の間の余分なスペースを含めないでください。

これを行う方法の 1 つは、含まれている div に固定の高さを設定してから、div に overflow:hidden を与えることです。次に、p タグで負の margin-top を使用します。

誰もがより良いアプローチを考えることができますか? 私のクライアントはデザインナチであり、さまざまなオペレーティングシステム、さまざまなブラウザー、さまざまな画面解像度でピクセルパーフェクトであることを期待しているため、私が言及したアプローチは本当に好きではありません. 私の経験から、ピクセル値を CSS にハードコーディングして要素を配置しようとしても、それらの要素が (動的コンテンツのために) サイズが異なる要素に対して相対的である必要がある場合、悪夢になる可能性があります。

私の懸念は正当なものですか？もしそうなら、境界線をテキストとまったく同じ高さにするより良い方法はありますか?

4

3 に答える 3

2

これはあなたが探しているものですか：

jsフィドル

line-height をコンテナの高さより下に設定するだけで、フォントが余白なしでコンテナを占めるようになります。

p{    
font-size:40px;
line-height:30px;
}
于 2013-03-24T14:42:14.240 に答える
1

疑似要素を使用して、このようなことを行うことができます (<= IE8 サポートなし)。境界線はフォントより少し大きいことに注意してください。これは、フォントの性質上、上下にわずかなスペースが許されていることに注意してください (両方が に設定されていることに注意して40pxください)。これは、クロスプラットフォーム/ブラウザ/などではどうにもなりません。ピクセルパーフェクトな画像を作成したい場合を除きます。

jsフィドル

ここに画像の説明を入力

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-24T05:02:21.317 に答える
0

Pタグにボーダーをつけ、pの行高を行間に隙間がないように設定し、行間に余白を与える

于 2014-07-31T07:52:57.080 に答える