html - CSS set baseline of inline-block element manually and have it take the expected height -

i'm designing sea-sky component. i'd have it's baseline @ sea-level.

here's attempt that's rendering correctly.

.out {     display:inline-block;     background-color:yellow;     padding-bottom:30px;   }    .outer {     display:inline-block;     background-color:cyan;     width:100px;     height:100px;     position:relative;     bottom:-30px ;  }    .inner {    position:absolute;    height:30px;    background-color:blue;    bottom:0px;    width:100%;  }

<div class="out">hello<div class="outer"><div class="inner">  </div></div>foobar</div>

the trick here set negative bottom , use padding have .out bottom @ expected position. here's happens without padding.

.out {     display:inline-block;     background-color:yellow;  }    .outer {     display:inline-block;     background-color:cyan;     width:100px;     height:100px;     position:relative;     bottom:-30px ;  }    .inner {    position:absolute;    height:30px;    background-color:blue;    bottom:0px;    width:100%;  }

<div class="out">hello<div class="outer"><div class="inner">  </div></div>foobar</div>

however, using multiple such component require setting padding max of bottom of components on last line. not feasible.

is there way without padding-bottom ?

the problem use bottom: -30px. yes, aligns sea text, breaks layout.

instead, should take advantage of inline-blocks having interesting baseline:

the baseline of 'inline-block' baseline of last line box in normal flow, unless has either no in-flow line boxes or if 'overflow' property has computed value other 'visible', in case baseline bottom margin edge.

that is, need fill sky part in-flow content. since sea part out-of-flow, won't affect baseline. therefore, can insert pseudo-element .outer takes remaining height left .inner:

.outer::before {   content: '';   display: inline-block;   height: calc(100% - 30px); } 

.out {    display: inline-block;    background-color: yellow;  }  .outer {    display: inline-block;    background-color: cyan;    width: 100px;    height: 100px;    position: relative;  }  .outer::before {    content: '';    display: inline-block;    height: calc(100% - 30px);  }  .inner {    position: absolute;    bottom: 0;    left: 0;    right: 0;    height: 30px;    background-color: blue;  }

<div class="out">    hello    <div class="outer">      <div class="inner"></div>    </div>    foobar  </div>

to avoid calc(100% - 30px) can use flexbox:

.outer {   display: inline-flex;   flex-direction: column; } .outer::before {   flex: 1; } 

.out {    display: inline-block;    background-color: yellow;  }  .outer {    display: inline-flex;    flex-direction: column;    background-color: cyan;    width: 100px;    height: 100px;  }  .outer::before {    content: '';    flex: 1;  }  .inner {    height: 30px;    background-color: blue;  }

<div class="out">    hello    <div class="outer">      <div class="inner"></div>    </div>    foobar  </div>

but think css wg hasn't decided how baselines in orthogonal flows should behave, recommend calc(100% - 30px) now.