使用边距/填充将 <span> 与 <p> 的其余部分隔开

Posted 2023-03-06

【中文标题】使用边距/填充将 <span> 与 <p> 的其余部分隔开

【英文标题】：Using margin / padding to space <span> from the rest of the <p>

【发布时间】：2013-03-17 21:06:48

【问题描述】：

我有一个文本块，我想用小斜体写下作者的姓名和日期，所以我把它放在 <span> 块中并设置了样式，但我想把名字留出一点位，所以我在块上应用了边距（也尝试了填充），但它不能让它工作。

我已经解决了这个问题 - 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;

【问题讨论】：

“将名称留出一点空间”是什么意思？

在 和文本的其余部分之间放置一点边距

在你的span css中添加display: block，间距生效jsfiddle.net/BqTUS/1

【参考方案1】：

将此样式添加到您的跨度：

position:relative; 
top: 10px;

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

【参考方案2】：

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;

【参考方案3】：

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

【参考方案4】：

总的来说，只需将 display:block; 添加到您的跨度。您可以保持 html 不变。

Demo

你可以用下面的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;

【讨论】：

"显示：块；"这里绝对是正确和简单的情况。

如果你想要一个块元素而不是内联元素，你不应该只使用像 这样的块元素吗？

不应该是display: inline-block;吗？

【参考方案5】：

尝试line-height，就像我在这里所做的那样： http://jsfiddle.net/BqTUS/5/

【讨论】：

通过添加line-height，您不会影响 html 文档的其余部分。如果在跨度右侧添加元素，则将inline-block 添加到您的元素将强制遵循宽度限制。您说您想“将名称留出一点空间，所以我应用了边距”。边距仅适用于您的元素的 TOP、BOTTOM 等。而 line-height 将保持间距正确，即使您的文本换行到下一行。我已经 1 UP'd 这个作为答案，因为它在技术上是正确的，如果文本换行，你是否需要名称和每个名称行之间的空格。

【参考方案6】：

在 html 中尝试：

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

或在css中：

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