Display spans inline-block combined with inline

Question

If you have three span elementshow do you display them like this?

span1_______         span3
            |||||||||
            |||||||||

            span2

span1 is inline-block width adjusted span2 is inline-block margin-top adjusted span3 is inline

But span2 pulls down span1 and span2 down with it?

Answer 1

That sounds right-- the margin is probably pushing the block-level container that holds all three of them. You may consider instead trying position: relative on span2 and changing it's margin-top to just top.

Answer 2

if i did understand correctly what you want. you might try using transform:translateY(npx) or you can use %

see example :

span:nth-child(2){
 position:relative;
transform:translateY(10px);
display:inline-block;
}

<span>span1</span>
<span>span2</span>
<span>span3</span>

OR a way to achieve your example ( with that black line ), is using this css

span:nth-child(2){
  width:100px;
  border-bottom:1px solid #000;
  display:inline-block;
}

<span>span1</span>
<span></span>
<span>span3</span>