html - Inline-Flex messes with vertical align -

having inline item next inline-flex nested flex box messes vertical alignment (it ignores top margin), 1 solution found put ::before in inline-flex item, i'm not sure why fixes it.

the first 1 ignores top margin on label, top margin works on second one, because of ::before.

label {    margin: 20px 5px 0 0;  }    .input-container {    display: inline-flex;  }    .with-before::before {    content: '';  }    .buttons {    display: flex;    flex-direction: column;  }

<div>    <label>top margin ignored:</label>    <div class="input-container">      <div class="buttons">        <button>&lt;</button>        <button>&gt;</button>      </div>      <input type="text"/>    </div>  </div>  <br/>  <div>    <label>top margin works:</label>    <div class="input-container with-before">      <div class="buttons">        <button>&lt;</button>        <button>&gt;</button>      </div>      <input type="text"/>    </div>  </div>

the label element inline-level default. such, ignores vertical margins (and padding , height).

8.3 margin properties: margin-top, margin-right, margin-bottom, margin-left, , margin

[margin-top , margin-bottom] have no effect on non-replaced inline elements.

however, inline-level elements subject vertical-align property, , default value baseline, means align vertically per inline content, such images, inputs or text.

you can override behavior value, such bottom.

label {    margin: 20px 5px 0 0;    vertical-align: bottom;  }    .input-container {    display: inline-flex;  }    button {    display: flex;    flex-direction: column;  }

<div>    <label>top margin ignored:</label>    <div class="input-container">      <div class="buttons">        <button>&lt;</button>        <button>&gt;</button>      </div>      <input type="text" />    </div>  </div>  <br/>  <div>    <label>top margin works:</label>    <div class="input-container with-before">      <div class="buttons">        <button>&lt;</button>        <button>&gt;</button>      </div>      <input type="text" />    </div>  </div>

as how ::before pseudo-element "fixes" problem, here 2 comments / observations:

1. adding ::before pseudo-element does not top margin work. if remove margin, you'll see label still aligned bottom pseudo.

2. i think pseudo – when empty – shifts label down because establishes new baseline container. however, if add content (i tried content: "x"), label shifts right top.

i'm pretty sure related shifting baseline. again, override baseline value in vertical-align bottom, middle or top.

more information:

• why textarea higher neighbor?
• vertical align not working on div