元素的上边距 (CSS)答案

【问题标题】：Top margin of an element (CSS)元素的上边距 (CSS)
【发布时间】：2014-04-08 12:45:51
【问题描述】：

我需要在元素顶部设置边距。文本必须在元素内并且上边距为 N 像素。

这是我想要实现的目标：

CSS：

body {
    height: 960px;
}
.breadcrumbs {
    position: relative;
    background-color: #eee;
    height: 10%;
}
.name {
    color: #000;
    margin-top: 50px;
}

谢谢。

【问题讨论】：

您不能在内联元素上设置任何边距顶部或底部，请参见此处：stackoverflow.com/questions/10324527/…

标签： html css

【解决方案1】：

DEMO 或者您可以尝试使用 padding-top 而不是 margin-top，如下所示

.name {
    display:block;
    color: #000;
    padding-top: 50px;
}

【讨论】：

【解决方案2】：

由于.breadcrumbs 具有position: relative，请将position: absolute; 设置为.name。

JSFiddle

【讨论】：

谢谢，我认为这是正确的答案。谢谢大家的帮助！（接受答案 10 分钟。）
问题是，如果您在其下方添加更多内容，则新内容将不会检测到其中的任何内容（因为.name 是绝对定位的）并且它的行为就像.breadcrumbs 是空的。

【解决方案3】：

您需要添加display: inline-block; 才能使边距起作用。

例如，

.name {
    color: #000;
    margin-top: 50px;
    display: inline-block;
}

希望这会有所帮助。

【讨论】：

【解决方案4】：

要使其工作，您需要使元素的行为类似于 block 元素。例如，块元素可以有边距或内边距。

但是，您会希望避免将其显示为实际块元素，因此您会希望保持其视觉位移相同（即内联 )。

幸运的是，display 有一个 css 值，可以满足您的需要：

display: inline-block;

将此添加到跨度（默认为inilne），它的行为将类似于block 元素，但仍看起来像inline 元素。

您也可以完全放弃边距并使用padding-top: 50px。

【讨论】：

【解决方案5】：

这种情况下，必须指定父ELEMENT位置相对和绝对位置sub，并指定top:0；

【讨论】：

【解决方案6】：

<span> 是一个内联元素。这意味着您不能对其应用边距或填充。

对于您的问题的解决方案，您有 - 至少 - 两种选择。

1.将文本的容器更改为块元素，例如<div>

所以：

<span class="name">Name</span>

会变成

<div class="name">Name</div>

2.通过使用此 css 将 span 设为块或内联块元素来更改您的 span 的行为：

.name {
display:inline-block
/* rest of your css */

这两篇文章会让你很好地了解什么是内联和块

http://www.impressivewebs.com/difference-block-inline-css/

http://css-tricks.com/almanac/properties/d/display/

【讨论】：