How to set margin to siblings but not to parent?

Question

How does one set a margin to siblings but not to the parent? For example, I've got input fields, buttons and a text area. I do want margins between these elements but I do not want an (extra) margin to the parent element.

I know I can set separate values for top right bottom left but that's not applicable 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>

So there should be margin between the name and email input elements but not between these two and the parent div (for example). I can't cheat by setting left and right margin to 0 as that'd break things when the name and email elements would be on the same line.

Instead of putting for example. Can you show us the code that you have? — dowomenfart, Mar 12 '15 at 12:16
use `:first-child` and `:last-child` selectors to ensure you don't have margins in the begining and in the end — Max Novich, Mar 12 '15 at 12:16
If you have a consistent margin on all the children of an element, you can set a negative padding on the parent to cancel out the margin between children and parent. — Touffy, Mar 12 '15 at 12:34
@Touffy: Padding cannot be negative. But in this case it looks like the padding on the parent should just be erased outright. — BoltClock, Mar 16 '15 at 17:15
Ah, right. Negative margin does work, though. With no background on the parent, since its layout box may cover neighboring elements. And yes, it may be a "hack" but it's a one-line hack with no assumption about the children except that they have a margin. Do check that it's not breaking anything before deploying ;) — Touffy, Mar 17 '15 at 08:40

score 0 · Answer 1 · edited May 23 '17 at 11:56

Updated to work with inputs on a single line (no line break between).

Note that I've put all the inputs on to a single line in the HTML because the whitespace between the elements was being rendered! (See here for an explanation)

      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>

Howsat?

@XTF not in my code above it hasn't. You need to update your question to be more complete. The code I have provided thus far answers the question as it currently stands. You're moving the goalposts! — gvee, Mar 12 '15 at 16:08
Your code does cover this specific example but it's (IMO) just a hack. — XTF, Mar 12 '15 at 16:58
@XTF another solution I can think of is: parent element gets padding=X, child elements get padding=2X. Not tried it out, but it should be a bit more elegant! — gvee, Mar 12 '15 at 17:37

How to set margin to siblings but not to parent?

1 Answers1