Is it possible to lift up an inlne element inside its block container?-CodePudding

.container {
 line-height: 24px;
}

  <div >
      <label>Text</label>
  </div>

In this case the .container's height is calculated to 24px and that of the label to about 20.6px (Chrome). Seemingly, the label is verically centered inside the .container. Is it possible instead to lift label up by 2-3px inside its container (to put it in other words, to align it vertically to the top line of the container)?

CodePudding user response：

You could use transform, like so:

.container {
 border:1px solid red;
}

label{
 transform:translateY(-3px);
 display:inline-block
}

<div >
      <label>Text</label>
  </div>

CodePudding user response：

You can use position to manipulate anything inside the container as you wish