在按钮之间放置边距答案

【问题标题】：Putting margins between Buttons在按钮之间放置边距
【发布时间】：2014-11-16 22:33:10
【问题描述】：

我想在这四个Buttons 之间放置边距/间距。我在 css 上有点挣扎。以下代码没有给我每个Button 之间的空间。有谁知道我需要改变什么？

练习.html

<div>
    <input type="button" id="button0" style="color:black; width:100px; height: 50px" />    
    <input type="button" id="button1" style="color:black; width:100px; height: 50px"  />
    <input type="button" id="button2" style="color:black; width:100px; height: 50px"  />    
    <input type="button" id="button3" style="color:black; width:100px; height: 50px" />
</div>

练习.css

.button{
    margin: 20px;
}

【问题讨论】：

只删除.button{}中的点，而不是写button{ margin: 20px;}

标签： html css button margins

【解决方案1】：

.button 负责类。你应该写

button {margin: 20px;}

就是这样:)。请记住，按钮应该有 display: block 或 display: inline-block，这样元素才能正确呈现 margin 属性。

不同 CSS 选择器的示例：

button {} // <button>
.buttonclass {} // <button class="buttonclass">
#buttonid {} // <button id="buttonid">

【讨论】：

【解决方案2】：

为每个按钮添加 class="button"：

<input class="button" type="button" id="button0" style="color:black; width:100px; height: 50px" />

【讨论】：

由于某种原因无法正常工作。如果按钮被包裹在一个 div 中，上面的代码会不起作用吗？
在输入元素中放入 margin:20px 是否有效？即：
是的。你知道为什么它会这样工作而不是在 css 文件中吗？
将此添加到您的元素下：

【解决方案3】：

.button 是一个类选择器，您没有设置类。 button 作为选择器不适用于给定的 HTML，因为元素是 input。正确的 CSS 应该是

input[type="button"]
{
    margin:20px;
}

input[type="button"] {
  color: black;
  width: 100px;
  height: 50px;
  margin: 20px;
}

<div>
  <input type="button" id="button0" />

  <input type="button" id="button1" />
  <input type="button" id="button2" />

  <input type="button" id="button3" />
</div>

从您的 cmets 看来，似乎从某个地方应用了另一种样式。您可能需要制作更多 specific 选择器。

试试

div input[type="button"]
{
    margin:20px;
}

还可以使用 Chrome 开发者工具或 Firebug for Firefox 检查按钮，以查看您的按钮应用了哪些样式。不要忘记刷新缓存 (ctr +f5)，因为 CSS 会被浏览器缓存。

更多关于开始使用CSS Selectors的信息

【讨论】：

不工作。如果这 4 个按钮包含在
中，我是否需要更改某些内容？
不，如果它不起作用，则有一些其他样式会覆盖该样式。使用 Chrome 开发人员工具检查按钮并查看正在应用的样式。我已经更新了 wo 中的 sn-p 将按钮包装在 div 中以进行演示。