使用显示 :inline-block 时，html 元素渲染未完美完成

Question

我想用一种情况来证明问题。在这里，我写了如下标记

<header>this is header-position is fixed</header>
<section id="one">
  <aside>why just a simple text taking me down!?</aside><!--
  --><section id="sub"></section>
</section>
<footer>
</footer>

现在我已经为上面的元素构建了一个 css 样式，如下所示。

*,*:after,*:before {
  padding:0;
  margin:0;
  box-sizing:border-box;
}
body {
  overflow:hidden;
}
header {
  position:fixed;
  top:0;
  left:0;
  height:100px;
  background-color:#ccc;
  width:100%;
}

#one {
  margin-top:100px;
  border:1px solid #0f0;
  width:100%;
}

aside {
  display:inline-block;
  border:1px solid #00f;
  width:20%;
  height:200px;
}

#sub {
  display:inline-block;
  border:1px solid #f00;
  height:200px;
  width:80%;
}

问题是，元素没有按预期生成。

主要问题是 <aside> & <section>彼此相邻的标签。

目前的样式在呈现 <aside> 时出现问题元素

请检查以下链接 http://codepen.io/Yeswanth-JG/pen/mpwzL

Answer 1

Inline-block 项需要垂直对齐，因为它们的默认值为 baseline

添加这个:

aside {
  vertical-align: top;
}

#sub {
  vertical-align: top;
}

Adjusted Codepen

What is Vertical Align @ CSS-Tricks