<div> move the parent without setting the offset / field

Question

I need something like this:

subfolder path

So, I copied and pasted the code from the chrome feeder extension, where I saw it, and mixed it with mine 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, with careful notification, you will find that I have had to use position: relative and top / left .folder-path .path-part in .folder-path .path-part . Without them, it looks like this:

 .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 slightly decreased, without adding any top / down padding / margin / offset properties to itself or its parent.

Note that the .path-part div is slightly down

I want to know why this is happening. Thanks!

UPDATE: So, I found out that this is happening because the arrows are relatively positioned. Indeed, this is correct. So, I want to know if there is a way to arrange the arrows as they should be without affecting the other .path-part .

Answer 1

Odd alignment is associated with the default value of 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>