1

I have two html elements i.e label and anchor and both of them are inline. If I set their display property to display: inline-block and give label margin-top of 50px, why along with label, anchor tag is also moving? Here i have only targeted label.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Practise</title>
    <style>
      label{
          margin-top: 50px;
          display: inline-block;
      }
    </style>
</head>

<body>
    <label>Hello</label>
    <a href="#">iamlink</a>
</body>

</html>
Enve
  • 6,298
  • 10
  • 38
  • 82
user19251251
  • 21
  • 2

1 Answers1

0

Both elements move because of the default vertical-align property. If you change the vertical-align to top, then you will be able to move the label only.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Practise</title>
    <style>
      label{
          margin-top: 50px;
          display: inline-block;
      }
      a {
          vertical-align: top;
      }
    </style>
</head>

<body>
    <label>Hello</label>
    <a href="#">iamlink</a>
</body>

</html>
Enve
  • 6,298
  • 10
  • 38
  • 82
  • I got your point. but the question is that why both of them are moving downwards, if i have targeted only label. isn't only label supposed to go downwards? – user19251251 Jun 03 '22 at 08:15
  • Ah sorry I misunderstood your question. I have updated my answer. – Enve Jun 03 '22 at 08:20