Why is Margin-Top Not Moving Something?

Question

margin-top seems to not be working for me. Margin-left is working fine. Howeever, when I use margin-top nothing moves. Not even if I set it to some absurd number.

My HTML:

<link rel="stylesheet" type="text/css" href="css/pricepages.css" media="screen" />
<div class="container-fluid ">
  <div class="row">
    <img src="{{var protoHost}}img/Internet.jpg" class="col-xs-0 img-responsive"/>
      <div class="contactspacer"> </div>
        <div class="DSLBlurb">
          <a href="Internet/DSL">Home DSL</a>
        </div>
    </div>
</div>

My CSS:

.DSLBlurb {
  background-color: #277FD8;
  color: white;
  margin-left: 100px;
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.DSLBlurb a {
  color: white;
  margin-top: 10px;
  margin-left: 16px;
}

What could the issue possibly be? Thank you.

Possible duplicate of [Why does this CSS margin-top style not work?](http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work) — chazsolo, Apr 28 '16 at 15:28

score 3 · Accepted Answer · answered Apr 28 '16 at 15:28

3

<a> default CSS value is inline so try changing it to inline-block or block whatever suits you better.

So:

.DSLBlurb a {
    color: white;
    margin-top: 10px;
    margin-left: 16px;
    display: inline-block;
}

answered Apr 28 '16 at 15:28

Ardian

408
2
11

Thanks! It fixed the issue. You get one upvote and one accept! – Thomas Hutton Apr 28 '16 at 15:30

score 0 · Answer 2 · answered Apr 28 '16 at 15:30

0

Try to give your a tag position relative & top attribute like this:

color: white;
/* margin-top: 10px !important; */
margin-left: 16px;
position: relative;
top: 10px;

answered Apr 28 '16 at 15:30

Vaibhav Jain

687
4
15

score 0 · Answer 3 · answered Apr 28 '16 at 15:31

0

First you dont even need margin you can just say:

//Dont use pixels use % different screens have different needs.

.DSLBlurb a {
  color: white;
  top: 10%;
  left: 16%;
}

answered Apr 28 '16 at 15:31

The Reptilian Army

478
6
13

Why is Margin-Top Not Moving Something?

3 Answers3