Html 使用边距/填充将 <span> 与 <p> 的其余部分隔开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15664706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using margin / padding to space <span> from the rest of the <p>
提问by sam
Ive got a block of text, and i want to write the authors name and date bellow it in small italics, so i put it in a <span>block and styled it, but i want to space the name out a little bit so i applided margin (also tried padding) to the block but it cant get it to work.
我有一个文本块，我想在下面用小斜体写出作者的姓名和日期，所以我把它放在一个<span>块中并设置了样式，但我想将名称隔开一点，所以我应用了边距（也尝试填充）到块，但它不能让它工作。
Ive made a jsfiddle of the issue - HERE
我对这个问题做了一个 jsfiddle -这里
The html looks like
html看起来像
<p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium.
<br><span>Author Name, Year</span>
</p>
The CSS
CSS
p {font-size:24px; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased;}
p span {font-size:16px; font-style: italic; margin-top:50px;}
回答by Peter Rasmussen
Overall just add display:block;to your span. You can leave your html unchanged.
整体只需添加display:block; 到你的跨度。您可以保持 html 不变。
You can do it with the following css:
您可以使用以下 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;
}
回答by Eli
Add this style to your span:
将此样式添加到您的跨度：
position:relative;
top: 10px;
回答by MagTun
Try in html:
在 html 中尝试：
style="display: inline-block; margin-top: 50px;"
or in css:
或在 css 中：
display: inline-block;
margin-top: 50px;
回答by Floremin
Use divinstead of span, or add display: block;to your css style for the spantag.
使用div代替span，或添加display: block;到span标签的css 样式中。
回答by gaynorvader
Try line-heightlike I've done here:
http://jsfiddle.net/BqTUS/5/
line-height像我在这里所做的那样尝试：http:
//jsfiddle.net/BqTUS/5/
回答by brbcoding
HTML:
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?
Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英。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:
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;
}
