top margin doesn't work

Question

I have a little problem with margin top for children element.

CSS:

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

http://jsfiddle.net/GRQNh/

Why it doesn't work? Class .name sticky on top.

Thanks in advance.

Answer 1

In your example you are using <span> and <span> is not block element, so you need either display: block or display: inline-block on it for margin to work.

If you add display: block to <span> then you can use <div> instead because the effect is the same.

Answer 2

Demo update CSS as

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

Answer 3

This is how it works:

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

Answer 4

Try to add in class .name attribute display:inline-block; that should help