CODEWITHSUNDEEP
csspadding
D. Stagg
D. Stagg

Reputation: 1

ignored padding on anchors in css

I am new to coding so please be patient, but in a page I am working on, the padding on a button I have made is being ignored, causing the button to overlap neighbouring elements. It is worth noting that I am using an anchor to make the button.

HTML

<a class = "classicbtn">Sign Up</a>

SCSS

.classicbtn {
    background-color: $primary-color;
    border-radius: 2rem;
    box-sizing: border-box;
    color: $white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1rem 4rem; //this is what is ignored. Background wraps into the next div
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
    &:hover {
      background-color: $button-hover;    
    }
    &:active {
      background-color: $button-active;
    }
  }

This is my first question posted so hopefully everything looks fine. Thanks in advance.

Upvotes: 0

Views: 274

Answers (3)

Johannes
Johannes

Reputation: 67748

I tried it without all the variables.

a tags are inline elements - they can't get higher than the line itself, so that's your overlapping prolem. Add display: inline-block; to the atag to prevent this, or use an according line-height (i.e. big enough to fit the height of your padded a-tag)

.classicbtn {
    background-color: #fb7;
    border-radius: 2rem;
    box-sizing: border-box;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 3rem 4rem; //this is what is ignored. Background wraps into the next div
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
   display: inline-block;
  }
<p>test test test test test test test test</p>
<p>test test<a class = "classicbtn">Sign Up</a>test test</p>
<p>test test test test test test test test</p>

Upvotes: 0

Nimish
Nimish

Reputation: 1016

Use float:left; in your css.

.classicbtn {
    background-color: green;
    border-radius: 2rem;
    box-sizing: border-box;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1rem 4rem;
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
    float:left;
}
<a class = "classicbtn">Sign Up</a>

Upvotes: 0

blecaf
blecaf

Reputation: 1645

Add display inline-block. Add you can even add margins as fit.

.classicbtn {
    background-color: red;
    border-radius: 2rem;
    box-sizing: border-box;
    color: $white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1rem 4rem;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}
<a class = "classicbtn">Sign Up</a>

Upvotes: 1

Related Questions