45

我有一个文本块，我想用小斜体写下作者的姓名和日期，所以我把它放在一个<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;}
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 回答
11

在 html 中尝试：

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

或在 CSS 中：

display: inline-block;
margin-top: 50px;
于 2016-03-25T07:36:48.817 回答
2

使用div代替span，或添加display: block;到span标签的 CSS 样式中。

于 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 回答