内联块和第一个子div的移动

Question

我刚刚开始学习CSS，现在已经停留在这一部分了。是什么让品牌类在信息类被内联阻止时向下移动？品牌之后的信息是否不会影响品牌类？

body {
  margin: 0;
  padding: 0;
}
.header {
  height: 34px;
  background-color: #ACDACD;
}
.brand {
  border: 2px solid red;
  height: 34px;
  display: inline-block;
}
.information {
  border: 2px solid blue;
  height: 34px;
  display: inline-block;
}

<div class="header">
  <div class="brand">AKKJKJKJKJKJFKJDKFJDKJF
  </div>
  <div class="information">
  </div>
</div>
<div class="mainbody">

</div>

Answer 1

默认情况下，vertical-align文字为baseline。 height的不同之处在于它。如果你有这个CSS规则：

vertical-align: top;

无论它是什么完美，它看起来都不错。见下文：

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}
.header {
  height: 34px;
  background-color: #ACDACD;
}
.brand {
  border: 2px solid red;
  height: 34px;
  display: inline-block;
}
.information {
  border: 2px solid blue;
  height: 34px;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

<div class="header">
  <div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
  <div class="information"></div>
</div>
<div class="mainbody">

</div>

＆＃13;

＆＃13;

＆＃13;

现在差异或白线是因为border，可以使用box-sizing: border-box制作。

＆＃13;

＆＃13;

* {
  box-sizing: border-box
}
body {
  margin: 0;
  padding: 0;
}
.header {
  height: 34px;
  background-color: #ACDACD;
}
.brand {
  border: 2px solid red;
  height: 34px;
  display: inline-block;
}
.information {
  border: 2px solid blue;
  height: 34px;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

<div class="header">
  <div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
  <div class="information"></div>
</div>
<div class="mainbody">

</div>

＆＃13;

＆＃13;

＆＃13;