button - ボタンのサイズを制限する

Question

「Go」のように、黄色の境界線がプラスの周りに完全に収まるように、このボタンを制限する必要があります。

補助用のボタンのCSSは次のとおりです。

 #addinput{
        border-radius: 10px;
        font-family: 'Belgrano', serif;
        color: #FFE200;
        text-shadow: 0px -1px 1.9px #fff, 0px 3px 2px #000;
        background:transparent;
        font-size: 3em;
        height:50%;
        background-size: 40% auto;
        display:block;
        border:1px solid yellow;
    }

写真2

Answer 1

高さの値を px で設定し、line-height も px で少し低く設定します。jsfiddleを参照してください。

#addinput{
    border-radius: 10px;
    font-family: 'Belgrano', serif;
    color: #FFE200;
    text-shadow: 0px -1px 1.9px #fff, 0px 3px 2px #000;
    font-size: 3em;
    display: block;
    border: 1px solid yellow;
    height: 40px;
    line-height: 30px;
}

Answer 2

境界線が完全にそのheight:50%周りに完全にフィットすることを削除すると、それが伸びる原因になります。

Answer 3

コンテナー内の段落で + をラップしてみることができます。

​&lt;div id="addinput"><p>+</p></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

その場合、CSS は次のようになります。

#addinput p {
  margin-bottom: -10px; 
  margin-top: -10px;     
}