Div 降低而不是按钮

Question

我正在尝试制作一个为网站创建设计的网站。它会告诉您创建网站所需的代码。我有一个工具栏 div，其中包含一个带有 6 个按钮的 table。当我尝试使工具栏 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，而不是 margin。边距在 div 外偏移，填充在 div 内偏移。像这样的东西会按下按钮：

.toolbar {
    padding-top: 50px;
}

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

Answer 2

请检查此 link。希望对您有所帮助。

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

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

Answer 3

这就是您可以使用 paddings 和 margins 的方式，并删除 toolbar height.

通过在 toolbar 上设置 padding，按下所有按钮，并在每个 button 上使用 margin，它们单独分开。

我将 table 更改为 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 4

您可以使用填充来控制内容和框边框之间的 space。

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

Div 降低而不是按钮

Div lowered instead of buttons

html

css

margin