Inline-block and movement of first child div

Question

I just started learning CSS, now stuck at this part. what makes the brand class to move down when information class is inline-block-ed? Doesn't information comes after brand so it shouldn't affect the brand class?

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>

Here is a very lengthy answer to this query. http://stackoverflow.com/a/9289377/2952405 — David Chelliah, Jun 06 '16 at 18:06
@InQusitive - re your comment on my answer - good point :/ - thats what I get for not paying attention to the code, just looking at the results and jumping to conclusions! One thing for you to take into account, is if you add text to `information` they line up perfectly. — CalvT, Jun 06 '16 at 18:20

score 4 · Accepted Answer · answered Jun 06 '16 at 17:57

By default the vertical-alignment of text is baseline. The difference in the height is what makes it. If you have this CSS rule:

vertical-align: top;

Or whatever it is perfect, it looks alright. See below:

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

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

</div>

And now the difference or the white line is because of the border, which can be made by using box-sizing: border-box.

* {
  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;
}

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

</div>

Inline-block and movement of first child div

1 Answers1