Top margin of an element (CSS)

Question

I need to set a margin to the top of an element. The text must be within the element and have a top margin of N pixels.

Here is what I want to achieve:

enter image description here

CSS:

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

Thanks.

You can't set any margin-top or bottom on inline elements see here : http://stackoverflow.com/questions/10324527/margin-top-in-inline-element — web-tiki, Apr 08 '14 at 12:48

score 3 · Answer 1 · answered Apr 08 '14 at 12:48

3

DEMO or you may be try with padding-top instead margin-top as follows

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

answered Apr 08 '14 at 12:48

Pravin W

2,451
1
20
26

score 2 · Answer 2 · edited Apr 08 '14 at 12:51

2

You need to add display: inline-block; to get the margin to work.

For instance,

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

Hope this helps.

edited Apr 08 '14 at 12:51

Ashley Medway

7,151
7
49
71

answered Apr 08 '14 at 12:47

Nitesh

15,425
4
48
60

score 2 · Accepted Answer · edited Aug 19 '19 at 07:01

2

Since .breadcrumbs has position: relative, set position: absolute; to .name.

JSFiddle

edited Aug 19 '19 at 07:01

Bhargav Rao

50,140
28
121
140

answered Apr 08 '14 at 12:49

thank you, I think it's the right answer. Thank you all for your help! (10 minutes for accept answer.) – owl Apr 08 '14 at 12:52
Thing is, if you added some more content below it, the fresh content would not detect anything in there (because `.name` is absolutely positioned) and it will behave like `.breadcrumbs` were empty. – Apr 08 '14 at 13:04

score 1 · Answer 4 · answered Apr 08 '14 at 12:52

For it to work you will need to make the element behave like a block element. A block element can have, for instance, margins or paddings.

However, you will want to keep it from being displayed like an actual block element, so you will want to keep its visual displacement the same (that is, inline).

Luckily, there is a css value for display which does exactly what you need:

display: inline-block;

Add this to the span (which is inilne by default) and it will behave like a block element while it will still look like an inline element.

You can also give up on margins at all and use padding-top: 50px.

score 0 · Answer 5 · answered Apr 08 '14 at 12:52

0

in this case, you must specify the parent ELEMENT position relative and absolute position subsidiary and specify top: 0;

answered Apr 08 '14 at 12:52

AlexPrinceton

1,173
9
12

score 0 · Answer 6 · answered Apr 08 '14 at 12:54

the <span> is an inline element. That means you cant apply margin or padding to it.

For the solution to your problem you have -at least- two options.

1.Change the container of your text to a block element, like <div>

so:

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

will become

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

2.Change the behavior of your span by making it a block or inline-block element with this css:

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

These two articles will give you a good idea of what is inline and block

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

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

Top margin of an element (CSS)

6 Answers6

Linked