Why two different inline-block elemens go downwards, if we target only one of them

Issue

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>

Solution

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>

Answered By – Enve

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.