0

私はその中にテキストのスパンを持つ単純なdivを構築しようとしています。

    <div id="bottom-text">
        <span>ONE STOP</span>
    </div>

そして、これが私が「＃bottom-text」に対して有効にしている単純なCSSスタイルです。

    #bottom-text{
        font-weight:700;
        font-size:50px;
        text-align:center;
        margin:auto;
        position:relative;
        padding-top:25px;
        height:65px;
        width:auto;
    }

何らかの理由で、「ONESTOP」というテキストが部分的に＃bottom-textの外側に表示されます。（すべての文字の上部のみ...）パディングを使用して修正しようとしましたが、テキストが部分的にパディング領域にオーバーフローしました。

このテキストが、含まれているはずのdivの外側に表示されている理由を誰かが理解するのを手伝ってもらえますか？（私はChromeとFirefoxをテストしてきました）

皆さんありがとう。

4

3 に答える 3

3 
.largefont {
   color: #0066FF;
   font-family:arial;
   font-size: 6px;
   display: inline;
} 

<span class="largefont">block level span</span>

にクラスを割り当てて、spanそれで遊んでください。

于 2012-08-09T16:02:45.470 に答える
0

行の高さを確認してください。私が考えることができる唯一のことは、他の場所にいくつかのスタイルを追加している可能性があるということです。「line-height：1;」を追加してみてください。テキストが実際に50pxの高さになるように、既存の＃bottom-textCSSに追加します。または、テキストを＃bottom-textの垂直方向の中央に配置する場合は、行の高さを＃bottom-textの高さ（65px）と一致させます。

于 2012-08-09T17:59:43.637 に答える
0

コードを見てください。#bottom-text高さは 65px、高さfont-sizeは 50px、およびpadding-top25px です。

65-(50+25) = -10 したがって、テキストの上部 10 ピクセルのみが表示されます。

より少ない量に設定padding-topし、正しいように遊んでください

于 2012-08-09T16:01:05.850 に答える