web-dev-qa-db-ja.com

<p>の残りから<span>のスペースにマージン/パディングを使用する

テキストブロックがあり、著者名と日付を小さなイタリック体で書きたいので、<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;}
cssmarginpaddinghtml
33
sam

全体的に、スパンに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;
}
50
Peter Rasmussen

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

position:relative; 
top: 10px;

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

24
Eli

Htmlで試してください：

style="display: inline-block; margin-top: 50px;"

またはCSSで：

display: inline-block;
margin-top: 50px;
9
MagTun

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

2
gaynorvader

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

2
Floremin

JSFiddle

HTML：

Lorem ipsum dolor座るamet、consectetur adipisicing elit。 Ipsa omnis obcaecati dolore reprehenderit praesentium。 Nisi eius delenitiがquis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatumをvoluptatesしますか？

</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;
}
0
brbcoding