与浮动和边距垂直对齐

Question

如果我从.input-box, .element-box 中删除margin:25px; 或设置margin-top:25px;，则元素不会垂直对齐。而且它只影响跨越元素而不是浮动元素。有人能解释一下为什么会这样吗？

button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
  height: 50px;
}

.flex-float-left {
  float: left;
}

.flex-float-right {
  float: right;
}

.flex-span {
  overflow: hidden;
}

.input-box,
.element-box {
  position: relative;
  margin: 25px;
  vertical-align: top;
  line-height: 1em;
}

#search,
#name,
#email,
#phone,
#address {
  width: 100%;
  display: block;
  padding: 0 25px;
  box-sizing: border-box;
}

#email-box {
  width: 50%;
}

#notes-box {
  clear: both;
}

#create {
  width: 50px;
}

<div class="block">
  <div class="element-box flex-float-right">
    <button class="j2 round tomato-brush chalk-stroke" id="create">&plus;</button>
  </div>
  <div class="input-box flex-span" id="search-box">
    <input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
  </div>
</div>

Answer 1

试试这个

.block{
  display: inline-flex;
  align-items: center;
}
button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
  height: 50px;
}

.flex-float-left {
  float: left;
}

.flex-float-right {
  float: right;
}

.flex-span {
  overflow: hidden;
}

.input-box,
.element-box {
  position: relative;
  margin: 25px 0;
  vertical-align: top;
  line-height: 1em;
}

#search,
#name,
#email,
#phone,
#address {
  width: 100%;
  display: block;
  padding: 0 25px;
  box-sizing: border-box;
}

#email-box {
  width: 50%;
}

#notes-box {
  clear: both;
}

#create {
  width: 50px;
}

<div class="block">
  <div class="input-box flex-span" id="search-box">
    <input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
  </div>
  <div class="element-box flex-float-right">
    <button class="j2 round tomato-brush chalk-stroke" id="create">&plus;</button>
  </div>
  
</div>

Answer 2

这似乎是父子之间的边距折叠问题。
div.input-box 上的边距与 div.block 一起折叠。

块的顶部和底部边距有时会组合（折叠）成单个边距，其大小是各个边距中最大的一个（或者只是其中一个，如果它们相等），这种行为称为边距折叠。请注意，浮动元素和绝对定位元素的边距永远不会塌陷。

父母和第一个/最后一个孩子
如果没有边框、内边距、内联部分、创建的块格式化上下文，或者没有将块的 margin-top 与其第一个子块的 margin-top 分开的间隙；或者没有边框、填充、内联内容、高度、最小高度或最大高度来将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

见Mastering margin collapsing @ MDN。

这是一个帮助演示的图表。
注意.input-box 的边距如何超出.block。

---

一种解决方案是将默认visible 以外的overflow 值分配给父元素：

.block {
  overflow: auto;
}

button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
  height: 50px;
}

.flex-float-left {
  float: left;
}

.flex-float-right {
  float: right;
}

.flex-span {
  overflow: hidden;
}

.input-box,
.element-box {
  position: relative;
  margin: 25px;
  vertical-align: top;
  line-height: 1em;
}

#search,
#name,
#email,
#phone,
#address {
  width: 100%;
  display: block;
  padding: 0 25px;
  box-sizing: border-box;
}

#email-box {
  width: 50%;
}

#notes-box {
  clear: both;
}

#create {
  width: 50px;
}

<div class="block">
  <div class="element-box flex-float-right">
    <button class="j2 round tomato-brush chalk-stroke" id="create">&plus;</button>
  </div>
  <div class="input-box flex-span" id="search-box">
    <input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
  </div>
</div>

---

其他解决方案包括：

padding

.block {
  padding: 0.1px;
}

button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
  height: 50px;
}

.flex-float-left {
  float: left;
}

.flex-float-right {
  float: right;
}

.flex-span {
  overflow: hidden;
}

.input-box,
.element-box {
  position: relative;
  margin: 25px;
  vertical-align: top;
  line-height: 1em;
}

#search,
#name,
#email,
#phone,
#address {
  width: 100%;
  display: block;
  padding: 0 25px;
  box-sizing: border-box;
}

#email-box {
  width: 50%;
}

#notes-box {
  clear: both;
}

#create {
  width: 50px;
}

<div class="block">
  <div class="element-box flex-float-right">
    <button class="j2 round tomato-brush chalk-stroke" id="create">&plus;</button>
  </div>
  <div class="input-box flex-span" id="search-box">
    <input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
  </div>
</div>

border

.block {
  border: 0.1px solid transparent;
}

button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
  height: 50px;
}

.flex-float-left {
  float: left;
}

.flex-float-right {
  float: right;
}

.flex-span {
  overflow: hidden;
}

.input-box,
.element-box {
  position: relative;
  margin: 25px;
  vertical-align: top;
  line-height: 1em;
}

#search,
#name,
#email,
#phone,
#address {
  width: 100%;
  display: block;
  padding: 0 25px;
  box-sizing: border-box;
}

#email-box {
  width: 50%;
}

#notes-box {
  clear: both;
}

#create {
  width: 50px;
}

<div class="block">
  <div class="element-box flex-float-right">
    <button class="j2 round tomato-brush chalk-stroke" id="create">&plus;</button>
  </div>
  <div class="input-box flex-span" id="search-box">
    <input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
  </div>
</div>

display:inline-block

.block {
  display: inline-block;
  width: 100%;
}

button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
  height: 50px;
}

.flex-float-left {
  float: left;
}

.flex-float-right {
  float: right;
}

.flex-span {
  overflow: hidden;
}

.input-box,
.element-box {
  position: relative;
  margin: 25px;
  vertical-align: top;
  line-height: 1em;
}

#search,
#name,
#email,
#phone,
#address {
  width: 100%;
  display: block;
  padding: 0 25px;
  box-sizing: border-box;
}

#email-box {
  width: 50%;
}

#notes-box {
  clear: both;
}

#create {
  width: 50px;
}

<div class="block">
  <div class="element-box flex-float-right">
    <button class="j2 round tomato-brush chalk-stroke" id="create">&plus;</button>
  </div>
  <div class="input-box flex-span" id="search-box">
    <input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
  </div>
</div>

---

供参考，另见：
How to disable margin-collapsing?
Margin on child element moves parent element
What You Should Know About Collapsing Margins @ CSS-Tricks