垂直对齐浮动和边距

Question

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

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

这看起来像父母和孩子之间的保证金崩溃问题 div.input-box上的边距与div.block折叠。

  

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

     

父母和第一个/最后一个孩子
  如果没有边框，填充，内联部分，块格式化上下文创建，或清除以将块的边缘顶部与其第一个子块的边缘顶部分开;或者没有边框，填充，内联内容，高度，最小高度或最大高度来将块的边距底部与其最后一个子节点的边距底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

请参阅Mastering margin collapsing @ MDN。

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

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

.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

Answer 2

试试这个

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;