最高保证金不起作用

Question

我对儿童元素的上边缘有一点问题。

CSS：

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

http://jsfiddle.net/GRQNh/

为什么它不起作用？类.name粘在上面。

提前致谢。

Answer 1

在您的示例中，您使用的是<span>而<span>不是阻止元素，因此您需要display: block或display: inline-block才能使用保证金。

如果您将display: block添加到<span>，则可以使用<div>，因为效果相同。

Answer 2

Demo 将CSS更新为

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

Answer 3

这是它的工作原理：

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

Answer 4

尝试添加应该有用的课程.name属性display:inline-block;