Why is Margin-Top Not Moving Something?

Issue

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.

Solution

<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 By - Ardian