InQusitive InQusitive - 6 months ago 12
CSS Question

Inline-block and movement of first child div

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>




Answer

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>