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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.