CODEWITHSUNDEEP
htmlcss
owl
owl

Reputation: 4461

Top margin of an element (CSS)

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

Fiddle: http://jsfiddle.net/GRQNh/

CSS:

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

Thanks.

Upvotes: 1

Views: 95

Answers (6)

user1180790
user1180790

Reputation:

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

Upvotes: 2

Sharky
Sharky

Reputation: 6274

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/

Upvotes: 0

AlexPrinceton
AlexPrinceton

Reputation: 1203

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

Upvotes: 0

user2699477
user2699477

Reputation:

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.

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

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.

Upvotes: 2

Pravin W
Pravin W

Reputation: 2521

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

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

Upvotes: 3

Related Questions