margin not applying to h2 element in ionic

Question

<ion-view>
<ion-content class="has-header padding coloredBackground">



<h2 class="centerHeading"> Receive your Order by:  </h2>
</ion-content>


</ion-view>

css:

.centerHeading{
    text-align: center;
    color: #6E6E6E;
    margin-top:20px;

}

margin-top or margin for that matter is not wokring at all. How do I fix this?

Demo: http://play.ionic.io/app/6d960c043467

Answer 1

Your margin-top is been getting over-ridden by the ionic.min.css-

Since, in your ionic.min.css file,

h2:first-child{
  margin-top:0px;
}

Solution 1:

Either over-ride the css style of h2 by your own css in your style sheet, by following

h2:first-child{
  margin-top:20px;
}

Solution 2:

.centerHeading{
    text-align: center;
    color: #6E6E6E;
    margin-top:20px !important;
}

Here, is the link that explains about "!important", Click Here

Answer 2

You have the order of include your CSS in wrong order. Your margin-top is overriding by ionic.min.css

You have two options:

option 1

Change your custom css file include after ionic.min.css

option2

Define property with !important

  margin-top: 20px !important;