<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<title>Doc</title>
<model>
.divv {
border-radius: 15px;
border: 1px strong black;
peak: 530px;
width: 400px;
}
img {
margin: 10px;
border-radius: 15px;
}
.cls {
text-decoration: none;
border: 1px strong black;
padding: 3px;
margin: 18px;
border-radius: 8px;
padding: 5px;
}
.clss {
place: relative;
left: -23px;
}
h2 {
margin: 10px;
}
p {
line-height: 1.4em;
margin: 10px;
}
.cls1 {
text-decoration: none;
padding: 14px;
background-color: rgb(222, 241, 250);
border-radius: 28px;
shade: rgb(13, 85, 200);
margin: 150px;
}
.diva {
text-align: heart;
margin: 30px;
}
</model>
</head>
<physique>
<!-- card.png is a file whcih incorporates a card picture. Write html and css code to design this card-->
<div class="divv">
<img src="card.jpg" alt="" width="380px">
<a category="cls" href="#">Nature</a>
<a category="cls clss" href="#">Lake</a>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum nulla magna sunt expedita animi laboriosam dicta ipsum dolor? Itaque, voluptates. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, doloremque?</p>
<a category="cls1" href="#">Learn Extra</a>
</div>
</physique>
</html>
the margin given to cls1 which is the tag, shouldn’t be getting utilized. Just like the ingredient is taking the margin from left n proper however not from the highest. Really, I am making an attempt to shift my learn extra button downwards however the given margin shouldn’t be getting utilized from the highest. Please do not give me a brand new method for fixing this simply inform me the explanation or the shortcomings that aren’t permitting the margin-top.
I’ve defined all the factor within the query. trying ahead to a fast reply. thanks
