フォントのすばらしいアイコンに上のパディングを追加する

Question

フォントのすばらしいアイコンに上のパディングを追加しようとしていますが、padding-top:10pxまたはmargin-top:10pxをi要素に設定すると、その前のテキストにパディングが追加されます。

誰かが助けることができますか？

jsFiddle

i { 
 
    font-size: 30px; 
 
    padding-top: 10px; 
 
} 
 
.block { 
 
    background-color: #ccc; 
 
    padding: 10px; 
 
    max-width: 400px; 
 
    text-align: center; 
 
} 
 
.block-number { 
 
    background-color: #000; 
 
    color: #fff; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> 
 
<div class="block"> 
 
    <div class="block-number">2 to 4</div> 
 
    <i class="fa fa-large fa-camera-retro"></i> 
 
</div>

Answer 1

私はそれが他の方法でそれを行うことは可能ですかどうかわからないんだけど、私はあなたの場合にはどうなることは絶対にアイコンを配置しています。

i { 
 
    font-size:30px; 
 
    position: absolute; 
 
    padding-top: 8px; 
 
    padding-left: 10px; 
 
} 
 

 
.block { 
 
    background-color:#f1f1f1; 
 
    padding:10px; 
 
    max-width:400px; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 

 
.block-number { 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:10px; 
 
    display:inline-block; 
 
    font-size:20px; 
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 
 
<div class="block"> 
 
    <div class="block-number"> 
 
    2 to 4 
 
    </div> 
 
    <i class="fa fa-large fa-camera-retro"></i> 
 
</div>

私はまだあなたの答えを得ることはありませんでしたが、あなただけのテキストを中央にして縦にアイコンにしたい場合は、次のコードを使用し

i { 
 
    font-size:30px; 
 
} 
 

 
.block { 
 
    background-color:#f1f1f1; 
 
    padding:10px; 
 
    max-width:400px; 
 
    text-align:center; 
 
} 
 

 
.block-number { 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:10px; 
 
    display:inline-block; 
 
    font-size:20px; 
 
} 
 

 
.block > * { 
 
    vertical-align: middle; 
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 
 
<div class="block"> 
 
    <div class="block-number"> 
 
    2 to 4 
 
    </div> 
 
    <i class="fa fa-large fa-camera-retro"></i> 
 
</div>

を .block-numberとフォント素晴らしい <i>電子の両方以来

Answer 2

lementsを個別<i>要素を調整するためにpositionとtopを使用して、別の方法があります

.block-number, i { 
    ... 
    vertical-align: top; 
} 
i { 
    ... 
    padding-top: 10px; 
} 

などvertical-alignは効果がかかりますので、あなたがtopへbaselineからデフォルト値を変更することができ、インラインブロックに設定されています。

i { 
    position: relative; 
    top: 10px; 
}