CODEWITHSUNDEEP
htmlcss
Thomas Hutton
Thomas Hutton

Reputation: 803

Why is Margin-Top Not Moving Something?

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.

Upvotes: 1

Views: 2180

Answers (3)

The Reptilian Army
The Reptilian Army

Reputation: 478

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%;
}

Upvotes: 0

Vaibhav Jain
Vaibhav Jain

Reputation: 727

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;

Upvotes: 0

Ardian
Ardian

Reputation: 408

<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;
}

Upvotes: 3

Related Questions