使用margin/padding从<p>的其余部分空间<span>

Question

我有一个文本块,我想用小斜体写下作者的名字和日期,所以我把它放在一个<span>块中并设计它,但我想把这个名字放一点点所以我应用了边缘(也尝试填充)到块但它不能让它工作.

我做了一个问题的解决方案 - 这里

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;}

Answer 1

总的来说只需添加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;
}

Answer 2

将此样式添加到您的范围:

position:relative; 
top: 10px;

演示:http://jsfiddle.net/BqTUS/3/

Answer 3

试试html:

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

或者在css中:

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