Maintain spacing when elements are pushed to the next line

Question

I am often faced with a problem where there is just not enough space for all the buttons in one line. Take this fiddle for example. If there is enough space, all element are centered vertically. If the lie breaks, they are pushed into the next line, but they don't maintain proper vertical spacing between them.

The fix I usually employ is to add margin-bottom to the buttons and remove padding-bottom from the container. this is what I mean.

But now I can't reuse my container (.controls class) with other elements, because not all elements contain buttons that break into next line.

Is there a way to keep a container padding:10px; and also have a nice line break with vertical spacing between buttons?

.controls {
  text-align: center;
  background-color: rgb(217, 241, 238);
  padding: 10px 10px 10px 10px;
}

button {
  font-size: 14px;
  background-color: rgb(181, 220, 216);
  border: none;
  padding: 0.5em 1em;
}

<section class="controls">
  <button id="new-file">New File</button>
  <button id="open-file">Open File</button>
  <button id="save-markdown" disabled>Save File</button>
  <button id="revert" disabled>Revert</button>
  <button id="save-html">Save HTML</button>
  <button id="show-file" disabled>Show File</button>
  <button id="open-in-default" disabled>Open in Default Application</button>
</section>

Answer 1

Steps:

• Set display: flex; justify-content: center; flex-wrap: wrap; on the container to have it center and wrap elements across lines as needed.
• Set margin: 0.5em; (or whatever value you prefer) on the buttons to space them out from each other horizontally and vertically.
• For testing, added resize: horizontal; overflow: auto; to container so you can see it adjust in real time. Don't need these in your actual code. You can just resize the browser instead.

Requested solution (to make sure I understood the question correctly):

• keep a container padding:10px; - INCOMPLETE
  • Thanks @TemaniAfif for pointing out the OP is trying to maintain visual padding at 10px. That's the tricky part of this problem when OP asks us not to change the padding of the container (like zeroing out the bottom).
  • After an hour or so of research, I don't think this is possible with flexbox. display: grid gets close with grid-gap but it requires structured sizing of child elements. See links below for the known issue and hacks for related problems but none of them can get past the container padding restriction in this question...
• have a nice line break - DONE
• vertical spacing between buttons - DONE

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: space-between;
  background-color: rgb(217, 241, 238);
  /* must be 10px for all sides; must appear 10px visually */
  padding: 10px;
  resize: horizontal;
  overflow: auto;
}

button {
  font-size: 14px;
  background-color: rgb(181, 220, 216);
  border: none;
  padding: 0.5em 1em;
  /* while this spaces buttons from each other, it also adds visual space to the container padding */
  margin: .5em;
}

<section class="controls">
  <button id="new-file">New File</button>
  <button id="open-file">Open File</button>
  <button id="save-markdown" disabled>Save File</button>
  <button id="revert" disabled>Revert</button>
  <button id="save-html">Save HTML</button>
  <button id="show-file" disabled>Show File</button>
  <button id="open-in-default" disabled>Open in Default Application</button>
</section>

Relevant links:

• https://github.com/w3c/csswg-drafts/issues/592
• Better way to set distance between flexbox items
• https://oliverjash.me/2016/12/28/gutters-for-flexible-components-with-sliced-padding
• https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 2

This is how it was done before flexbox existed:

.controls {
    text-align: center;
    background-color: rgb(217, 241, 238);
    padding: 10px 10px 5px;
  }
  
  button {
    font-size: 14px;
    background-color: rgb(181, 220, 216);
    border: none;
    padding: 0.5em 1em;
    margin: 0 5px 5px 0;
  }

<section class="controls"
    ><button id="new-file">New File</button
      ><button id="open-file">Open File</button
      ><button id="save-markdown" disabled>Save File</button
      ><button id="revert" disabled>Revert</button
      ><button id="save-html">Save HTML</button
      ><button id="show-file" disabled>Show File</button
      ><button id="open-in-default" disabled>Open in Default Application</button
      ></section>

The problem with the above technique is that you need to strictly control the whitespace between your elements. In your example, the "proper" horizontal spacing is "improper". It's coming from the fact <button>s have display:inline by default, and the spaces/tabs/returns between > and the next < is rendered as a space by the browser (like spaces between words).

The "proper" way of doing it was to use margin to control the space between the items down to pixel.

---

But those times are gone. The really proper (and modern) way of achieving the same result today is using flexbox:

.controls {
    background-color: rgb(217, 241, 238);
    padding: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  button {
    font-size: 14px;
    background-color: rgb(181, 220, 216);
    border: none;
    padding: 0.5em 1em;
    margin: 2.5px;
  }

<section class="controls">
      <button id="new-file">New File</button>
      <button id="open-file">Open File</button>
      <button id="save-markdown" disabled>Save File</button>
      <button id="revert" disabled>Revert</button>
      <button id="save-html">Save HTML</button>
      <button id="show-file" disabled>Show File</button>
      <button id="open-in-default" disabled>Open in Default Application</button>
    </section>

I find the flexbox technique cleaner and easier to control/maintain/scale.