7

背景画像とテキストの両方を持つクラスがあります。テキストのみの上のスペースを操作する方法を見つけようとしています。「マージン」タグを使用すると、全体 (画像 + テキスト) の位置が変更されます。 、テキストのみを制御する必要があります。

text-indent を使用すると、水平方向のスペースをある程度制御できます。そのようなものが存在する場合にのみ、テキストの上下のスペースをより細かく制御するものが必要です。

CSS クラスは次のとおりです。

.contactb { float:left; margin:0 5px 0 0; padding:0 0; background:url(images/contact_b.png) top no-repeat; display:block; width:108px; height:57px; font-family: 'hand-webfont'; color:black; font-size:17px; }

HTMLコードは次のとおりです。

<li><a href="contact.html" class="contactb">Contact</a></li>

どんな助けでも大歓迎です。

4

3 に答える 3

6

あなたが探しているのは単に「パディング」です。

.myClass {
 padding-top:10px
 padding-bottom:10px;
}
于 2012-08-16T19:10:50.070 に答える
1

秘訣は、パディングをbackground-originと組み合わせることです... ただし、CSS3 対応のブラウザーでのみサポートされています (古い IE バージョンではサポートされていません: < IE9)

これ

background-origin:border-box;

さらに、適切なパディングは私にとってはうまく機能します...(background-originのデフォルト値はpadding-boxです。これが理由です。パディングだけでは機能しません...)

于 2014-01-30T11:41:25.617 に答える
1

あなたがやろうとしていると思うことの実例を次に示します: http://jsfiddle.net/yhV78/

トリック:

  1. 背景画像を含む1つのdivを作成します(私の場合、背景はバニーです)
  2. コンテンツを含む内部 div (または一連の div) を作成します。内側の div のパディングを調整するか、相対位置と絶対位置を組み合わせて配置できます。
于 2012-08-16T19:33:20.357 に答える