如何为兄弟姐妹而不是父母设置保证金？答案

【问题标题】：How to set margin to siblings but not to parent?如何为兄弟姐妹而不是父母设置保证金？
【发布时间】：2015-03-17 01:13:05
【问题描述】：

如何为兄弟姐妹而不是父母设置边距？例如，我有输入字段、按钮和文本区域。我确实想要这些元素之间的边距，但我不想要父元素的（额外）边距。

我知道我可以为右上角的左下角设置单独的值，但这不适用于 IMO。

      body {
        background-color: #717074;
        font-family: sans-serif;
        margin: 1em;
      }
      .d1 {
        background-color: white;
        margin: 0 auto;
        padding: 1px 1em;
        width: 960px;
      }
      .fw {
        width: 100%
      }
      input {
        margin: 5px
      }
      textarea {
        width: 100%
      }

<div class=d1>
  <form method=post>
    <input name=name type=text required placeholder="Naam">
    <br>
    <input name=email type=email required placeholder="Emailadres">
    <textarea name=body rows=5></textarea>
    <input type=submit>
  </form>
</div>

所以 name 和 email 输入元素之间应该有边距，但在这两个和父 div 之间没有边距（例如）。我不能通过将左右边距设置为 0 来作弊，因为当名称和电子邮件元素位于同一行时，这会破坏事情。

【问题讨论】：

而不是放例如。你能告诉我们你的代码吗？
使用 :first-child 和 :last-child 选择器来确保您在开始和结束时没有边距
如果一个元素的所有子元素的边距一致，则可以在父元素上设置负填充以抵消子元素和父元素之间的边距。
@Touffy 这样的黑客真的有必要吗？
@Touffy：填充不能为负数。但在这种情况下，看起来父级上的填充应该被彻底删除。

标签： html css layout

【解决方案1】：

更新为在单行上处理输入（之间没有换行符）。

请注意，我已将所有输入放在 HTML 中的一行中，因为元素之间的空白正在被渲染！（See here解释）

      body {
        background-color: #717074;
        font-family: sans-serif;
        margin: 1em;
      }
      .d1 {
        background-color: white;
        margin: 0 auto;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 0px;
        width: 960px;
      }
      .fw {
        width: 100%
      }
      input {
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 5px;
        margin-bottom: 5px;
      }
      textarea {
        width: 100%;
      }

<div class=d1>
  <form method=post>
    <input name=name type=text required placeholder="Naam"><input name=email type=email required placeholder="Emailadres"><textarea name=body rows=5></textarea><input type=submit>
  </form>
</div>

怎么样？

【讨论】：

@XTF 不在我上面的代码中，它没有。您需要更新您的问题以使其更完整。到目前为止，我提供的代码回答了目前的问题。你正在移动球门柱！
您的代码确实涵盖了这个特定示例，但它（IMO）只是一个 hack。
@XTF 我能想到的另一个解决方案是：父元素得到 padding=X，子元素得到 padding=2X。没试过，不过应该更优雅一点！