Div降低而不是按鈕

Question

我想製作一個網站，爲網站創建一個設計。它會告訴你你需要製作網站的代碼。我有一個包含6個按鈕的表格的工具欄div。當我嘗試在工具欄div中向下按下按鈕時，它會向下移動div，而按鈕仍然位於div頂部以下十幾個像素處。這裏是我的代碼：

.toolbar { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: #444444; 
 
} 
 
#a { 
 
    height: 50px; 
 
    width: 150px; 
 
}

<div class='toolbar'> 
 
    <center> 
 
    <table class='tools' id='a'> 
 
     <tr> 
 
     <td> 
 
      <button class='text' id='a'> 
 
      Add text 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='image' id='a'> 
 
      Add image 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='table' id='a'> 
 
      Add table 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='jsbutton' id='a'> 
 
      Add button 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='addons' id='a'> 
 
      Add-ons 
 
      </button> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </center> 
 
</div>

這有什麼不對的代碼，或者是我的要求是不可能的？

Answer 1

這是你如何使用padding S和margin S，並刪除toolbarheight。

通過設置在toolbarpadding，所有的按鈕被按下時，與通過在每個button使用margin，它們單獨地分開。

我改變了表display: inline-table;，添加text-align: center;您toolbar所以它的中心（作爲<center>元素已過時），我也放棄了id的，因爲他們應該是唯一的。

.toolbar { 
 
    padding-top: 10px; 
 
    width: 200px; 
 
    background-color: #444444; 
 
    text-align: center; 
 
} 
 
.tools { 
 
    display: inline-table; 
 
} 
 
.tools, .text, .image, .table, .jsbutton, .addons { 
 
    margin-bottom: 6px; 
 
    height: 50px; 
 
    width: 150px; 
 
}

<div class='toolbar'> 
 
    <table class='tools'> 
 
     <tr> 
 
     <td> 
 
      <button class='text'> 
 
      Add text 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='image'> 
 
      Add image 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='table'> 
 
      Add table 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='jsbutton'> 
 
      Add button 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='addons'> 
 
      Add-ons 
 
      </button> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
</div>

Answer 2

您正在尋找padding，而不是margin。邊距在div之外偏移，填充在div內偏移。像這樣將推動按鈕不放：

.toolbar { 
    padding-top: 50px; 
} 

這可能有助於理解盒模型：http://www.w3schools.com/css/css_boxmodel.asp

Answer 3

請檢查該鏈接。我希望這能幫到您。

http://codepen.io/rajeshwarpatlolla/pen/jqbmgj

.toolbar { 
    padding-top: 20px; 
    width: 200px; 
    height: 300px; 
    background-color: #444444; 
} 

Answer 4

你可以使用填充來控制的內容和你的框的邊框之間的空間。

.toolbar { 
    width: 200px; 
    height: 300px; 
    background-color: #444444; 
    padding-top:10px; 
} 
#a { 
    height: 50px; 
    width: 150px; 
    padding:10px; 
}