anchor tag not registering margin-top

[Marwan]

Hey guys,

This has me stumped. my anchor link refuses register the margin-top that is applied to it. I’ve tried in multiple browsers and also in jsfiddle – just in case it was some other part of wordpress or my css/html that was doing it. The same results were experienced in jsfiddle.

Margin-left works fine….

setting “display: inline-block;” will give me what I want, except this is not recognised in IE.

I can get around it by declaring it as a block element and then declaring a static width, but that is messy and I’d prefer to avoid it.

Any help would be greatly appreciated, I’m probably just missing something really obvious…

below is a cleaned up extracted version of what I’m working with.

jsfiddle link – http://jsfiddle.net/mpN8z/

HTML

About Company


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egesta.


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egesta.


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egesta.
                    Our Projects





 

CSS

p { font-size: 0.75em; line-height: 1.375em; color: #6b6b6b; text-align: justify; }



h1 { margin: 0px 0px 20px 0px; color: #00529b; font-weight: normal; font-size: 1.125em; }



a { text-decoration: none; }



a.button {  color: #dddddd;

background: #0a3256;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-moz-box-shadow: 1px 1px 1px #a6a6a6;

-webkit-box-shadow: 1px 1px 1px #a6a6a6;

box-shadow: 1px 1px 1px #a6a6a6;

}



a.btn-lvl-1 {        font-size: 0.75em;

padding: 9px;

margin-top: 35px;

}



a.btn-lvl-2 {    font-size: 0.5625em;

padding: 7px;

margin-top: 25px;

}



a.button:hover { background: #007dc3; color: #dddddd; }

[Senff]

There’s nothing messy about declaring it a block element (which is kinda the logical way, inline elements don’t really take top- or bottom-margins), so I would just do that.

No need to give it a fixed width though, you can use float: left; without any problems (since there are no elements following it).

[TheDoc]

It looks like it’s not going to accept the top margin unless it’s put into display: block. I don’t know why this is.

You could wrap your link in a p tag like this: http://jsfiddle.net/mpN8z/4/

[Marwan]

thanks for replying guys.

@senff please disregard my earlier comment if you saw it. I just realised you mentioned to float it left as well. I’ll try that.

@TheDoc I was so caught up in margin-top that it didn’t occur to me to use

tags like that.

[Marwan]

Both are working, now it’s just a matter of choosing the one that fits best.

Thanks guys!

[Author]

Posts