CODEWITHSUNDEEP
htmlcsslayout
jay_t55
jay_t55

Reputation: 11662

Margin-top not working for certain elements

I have 2 elements that are not responding to margin: 260px 0 0 0; or margin-top: 260px;. And I don't know why. When I open dev tools in IE and inspect the element, the margin is there, but the element stays at teh top of the div as if margin: 260px 0 0 0; was not set at all.

Why isn't margin working for the a element inside .SideContainer a {...} or .RightSide a {...}?

        <section class="RightSide SideContainer">
            <a href="~/Shared/Services/WebDevelopment">Packages &amp; Pricing</a>
        </section>


    .SideContainer h1 {
        color: white;
    }

    .SideContainer a {
        margin: 260px 0 0 0;
    padding: 10px 15px 10px 15px;
    background-color: #ec462f;
    color: white;
    }

.RightSide {
    float: right;
}

    .RightSide a {
        margin-top: 200px;
    }

Upvotes: 1

Views: 1115

Answers (6)

Jesse T-Cofie
Jesse T-Cofie

Reputation: 227

You need to float your 'a' tag like so:

.SideContainer a {
    ...
    float:left;
}

Upvotes: 0

mina __________
mina __________

Reputation: 46

I think it's enough to add display:block

.RightSide {
margin-top: 200px;
display: block;
}

Upvotes: 0

Touhid Rahman
Touhid Rahman

Reputation: 2593

I worked on your code, you have to put display:inline-blcok in the anchor tag to get margin-top.

Solution:

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .SideContainer h1 {
                color:white;
            }
            .SideContainer a {
                padding:10px 15px 10px 15px;
                background-color:#ec462f;
                color:white;
            }
            .RightSide {
                float:right;
            }
            .RightSide a {
                display:inline-block;
                margin-top:200px;
            }
        </style>
    </head>
    <body>
        <section class="RightSide SideContainer">
            <a href="~/Shared/Services/WebDevelopment">Packages &amp; Pricing</a>
        </section>
    </body>
</html>

Upvotes: 0

Vimal Stan
Vimal Stan

Reputation: 2005

Anchor tags are inline elements, so the top and bottom margin styles aren't applied to them as expected. Set the display property to inline-block, it should work.

.SideContainer a, .RightSide a {
    display: inline-block;
}

Keep in mind that setting an element's display property to inline-block will cause spaces in the source code to be rendered. Here's how you can prevent that.

An alternative would be to set the display property to block and set the float property if required.

.SideContainer a, .RightSide a {
    display: block;
    float: left; /*if required*/
}

Upvotes: 3

Sumit
Sumit

Reputation: 1639

Inline element doesn’t respond to margin.

You need to make the a tag display block or you can float it to right so it will behave right like regular "a" tag and will respond to margin too.

try this:

.RightSide a {
    margin-top: 200px;
    float: right;
}

Upvotes: 0

patkay
patkay

Reputation: 121

It's not working because your anchor tags are inline elements and don't respond to margin.

If you add display:block to your CSS on .SideContainer a, it will move.

http://codepen.io/anon/pen/Girwh

Upvotes: 0

Related Questions