45

テキストのブロックがあり、その下に著者名と日付を小さなイタリック体で書きたいので、<span>ブロックに入れてスタイルを設定しましたが、名前を少し離したいので、マージンを適用しました (ブロックへのパディングも試みましたが、機能しませんでした。

私は問題の jsfiddle を作成しました - HERE

htmlは次のようになります

<p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium.
<br><span>Author Name, Year</span>
</p> 

CSS

p       {font-size:24px; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased;}
p span  {font-size:16px; font-style: italic; margin-top:50px;}
4

6 に答える 6

65

全体的に、 display:block;を追加するだけです。あなたのスパンに。html は変更せずにそのままにしておくことができます。

デモ

次のcssでそれを行うことができます:

p {
    font-size:24px; 
    font-weight: 300; 
    -webkit-font-smoothing: subpixel-antialiased; 
    margin-top:0px;
}

p span {
    font-size:16px; 
    font-style: italic; 
    margin-top:20px; 
    padding-left:10px; 
    display:inline-block;
}
于 2013-03-27T17:00:34.213 に答える
26

このスタイルをスパンに追加します。

position:relative; 
top: 10px;

デモ: http://jsfiddle.net/BqTUS/3/

于 2013-03-27T16:59:45.980 に答える
2

divの代わりに使用するか、タグの CSS スタイルにspan追加します。display: block;span

于 2013-03-27T17:00:15.583 に答える
2

line-heightここで行ったように 試してください: http://jsfiddle.net/BqTUS/5/

于 2013-03-27T17:03:40.470 に答える
0

JSFiddle

HTML:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. Nisi eius deleniti voluptates quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?

</p><span class="small-text">George Nelson 1955</span>

CSS:

p       {font-size:24px; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased;}
p span  {font-size:16px; font-style: italic; margin-top:50px;}

.small-text{
font-size: 12px;
font-style: italic;
}
于 2013-03-27T16:59:54.820 に答える