元素的上边距（CSS）

Question

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

这是我想要实现的目标：

小提琴：http://jsfiddle.net/GRQNh/

CSS：

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

感谢。

Answer 1

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

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

Answer 2

您需要添加display: inline-block;才能获得保证金。

例如，

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

希望这有帮助。

Answer 3

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

• JSFiddle

Answer 4

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

但是，您希望不要将其显示为实际块元素，因此您需要保持其视觉位移相同（即内嵌 ）。

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

display: inline-block;

将此添加到范围（默认情况下为inilne），它的行为类似于block元素，但它仍然看起来像inline元素。

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

Answer 5

在这种情况下，您必须指定父ELEMENT位置相对和绝对位置辅助并指定top：0;

Answer 6

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

对于您的问题的解决方案，您至少有两个选项。

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

这样：

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

将成为

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

2.通过使用此css将其设为块或内联块元素，更改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/