html - 中央揃えとサイズ変更ボタン

Question

#controlpanel .button 
{

    margin: 12px 12px 0px 12px;
     width: 100%;
}

これらのボタンを白いボックスの幅いっぱいにしながら、両側に 12px を持たせるにはどうすればよいですか? パディングは内部にスペースを追加します...そしてマージンはそれらを白いボックスから外します。

Answer 1

1. #controlpanel にパディングを追加
2. ボタンから左右の余白を削除

3. box-sizing:border-box をボタンに追加すると、次のようになります。

   #controlpanel{     
       padding:0px 12px 12px 12px;
   }
   
   
   #controlpanel .button {
       margin: 12px 0px 0px 0px;
       width: 100%;
       box-sizing:border-box;
       -o-box-sizing:border-box;
       -moz-box-sizing:border-box;
       -ms-box-sizing:border-box;
   }
   

Answer 2

2つのことが役立つかもしれません：

• にパディングを使用するdiv#controlpanel
• ボタンの余白を削除します

さらに、100％の幅を削除することもできます。

Answer 3

問題は、width: 100%;. その行をコメントアウトして、次のように入力してみてください。display: block;