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

user_5006880 0
Viewed 41

.container {
 line-height: 24px;
}
  <div class="container">
      <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)?

css html
2 Answers

You could use transform, like so: 

.container {
 border:1px solid red;
}

label{
 transform:translateY(-3px);
 display:inline-block
}
<div class="container">
      <label>Text</label>
  </div>

user_152886410

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

user_173256950
Related