は、CSSのアンカーでパディングを無視しました

Question

私は辛抱強くお待ちください。作業中のページでは、ボタンのパディングが無視され、隣接する要素がオーバーラップします。私がボタンを作るためにアンカーを使用していることは注目に値する。

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

これがうまくいけば、すべてが正常に見える掲載の私の最初の質問です。前もって感謝します。

Answer 1

すべての変数を使用せずに試しました。

aタグはインライン要素です。これらのタグは、行自体よりも高くなることはありません。そのため、それはあなたの重複するプロレンです。これを防ぐためにaタグにdisplay: inline-block;を追加、または応じline-height（すなわち、あなた埋めタグの高さに合わせて十分な大きさ）

.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>

Answer 2

が表示インラインブロックを追加します。あなたは余裕を追加することもできます。

.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>

Answer 3

利用フロート：左;あなたの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>