<div> moving out of parent without any offset/margin set

Question

I want something like this:

nested folder path

So, I copied and pasted some code from the Feeder chrome extension where I saw it and mixed it with my own to get the required thing:

.folder-path {
    display: inline-block;
    height: 50px;
    width: 350px;
    border: 0.1px solid black;    
}

.folder-path .path-part {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin-left: 10px;
    position: relative;/*HACK HERE*/
    top: -7px;
}

.folder-path .path-part + div {
    display: inline-block;
    height: 50px;
    width: 35px;
    display: inline-block;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 35px;
    height: 35px;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5,transparent), color-stop(0.5, #000000), to(#000000));
    position: relative;
    left: -15px; /*to move slightly left*/
    top: 6px; /*to accommodate rotation*/
}

<div class="folder-path">
	<!--div.path-part+div-->
	<div class="path-part">Snippets</div>
    <div></div>
    
    <div class="path-part">d</div>
    <div></div>
</div>

However, on careful notice you will find that I had to use position: relative and top/left offset hacks in .folder-path .path-part rule. Without them, this is what it looks like:

.folder-path {
    display: inline-block;
    height: 50px;
    width: 350px;
    border: 0.1px solid black;    
}

.folder-path .path-part {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    position: relative;
    margin-left: 10px;
}

.folder-path .path-part + div {
    display: inline-block;
    height: 50px;
    width: 35px;
    display: inline-block;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 35px;
    height: 35px;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5,transparent), color-stop(0.5, #000000), to(#000000));
    position: relative;
    left: -15px; /*to move slightly left*/
    top: 6px; /*to accommodate rotation*/
}

<div class="folder-path">
	<!--div.path-part+div-->
	<div class="path-part">Snippets</div>
    <div></div>
    
    <div class="path-part">d</div>
    <div></div>
</div>

As you can see, the .path-part has gone down a bit, without my putting any top/down padding/margin/offset properties on either itself or its parent.

notice how the .path-part div has gone down a bit

I want to know why this is happening. Thank you!

UPDATE: So, I got to know that this is happening because the arrows are relatively positioned. Indeed it is correct. So, I want to know if there's any way to position the arrows the way they should be without affecting the other .path-part divs.

Answer 1

The odd alignment is due to the default vertical-align: baseline. It seems you want vertical-align: middle

.folder-path > div {
  display: inline-block;
  vertical-align: middle;
}

.folder-path {
  display: inline-block;
  height: 50px;
  width: 350px;
  border: 0.1px solid black;    
}
.folder-path .path-part {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}
.folder-path .path-part + div {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  width: 35px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 35px;
  height: 35px;
  border: 1px solid rgba(0,0,0,0.2);
  -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5,transparent), color-stop(0.5, #000000), to(#000000));
}

<div class="folder-path">
  <!--div.path-part+div-->
  <div class="path-part">Snippets</div>
  <div></div>
  
  <div class="path-part">d</div>
  <div></div>
</div>