1

私はいつも、div内にテキストを配置するための「最良の」方法は何であるか疑問に思っていました

1）テキストを囲む要素にパディングを配置し、要素の高さ/幅からパディングを差し引きます。

<div class="button">
    Activate
</div><!-- button -->

.button
{
    height: 20px;   /* -10px from padding for text */
    width: 90px;    /* -10px from padding for text */
    padding-left:10px;
    padding-right:10px; 
}

2）テキストの周りにスパンを置き、それを独自の要素として配置します。

<div class="button2">
    <span class="button2-text">
        Activate
    </span>
</div><!-- button2 -->

.button2
{
    height: 30px
    width: 100px
}
.button2-text
{
    padding-left:10px;
    padding-top:10px;
}

私はいつも1）を使用します。コードが少ないためですが、2）の方が適切か、何か方法1）を使用するのが間違っているのではないかと思います。

4

3 に答える 3

2

2番目のオプションは、高さ/幅とパディングを混ぜません。

現在、ブラウザーはすべて同じボックス モデルに従っています (これは、オプション 1 の位置付けです)。これは を持つことと同等box-sizing: content-boxです。

バージョン 6 までの Internet Explorer と Quirks モードでは、幅の一部としてパディングを含む別の方法が使用されていましたbox-sizing: border-box。

両方のモデルを正しく配置するには、オプション 2 を使用するのが最も安全です。

http://jsfiddle.net/stb5a/を確認すると、box-sizingに設定されていcontent-boxます。に変更しても、テキストの位置は変更されborder-boxません。

基本的に、オプション 2 は Internet Explorer の古いバージョン (現在はほとんどなくなっています) との互換性のために使用され、これらのバージョンのコーディングに慣れている開発者は、これまでと同じパターンを使用します。

于 2012-06-22T22:14:31.337 に答える
1

最良の方法は、<button>

jsBin デモ

<button class="button">Activate</button>

CSS:

  .button{
    border: 1px solid #888;
    background:#eee;
    padding:5px 30px;
    border-radius:4px;
  }

そして、色で遊ぶ自由な時間があります:)

于 2012-06-22T22:14:01.243 に答える
-1

私は 1) で行きます。2) では、<span>タグは意味的に役に立ちません。内部に他のコンテンツがない場合を<div>除き、マークアップをコンパイルしないでください。

KISS - キープ・イット・シンプル・バカ

于 2012-06-22T22:13:48.540 に答える