给.cls1
的margin是a
标签,没有被应用。左边距和右边距被应用,但顶部没有。
我试图将我的“阅读更多”按钮向下移动,但给定的保证金没有从顶部应用。
请不要给予我一个新的方法来解决这个问题,只是告诉我的原因或缺点是不允许margin-top
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.divv {
border-radius: 15px;
border: 1px solid black;
height: 530px;
width: 400px;
}
img {
margin: 10px;
border-radius: 15px;
}
.cls {
text-decoration: none;
border: 1px solid black;
padding: 3px;
margin: 18px;
border-radius: 8px;
padding: 5px;
}
.clss {
position: 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;
color: rgb(13, 85, 200);
margin: 150px;
}
.diva {
text-align: center;
margin: 30px;
}
</style>
</head>
<body>
<!-- card.png is a file whcih contains a card image. Write html and css code to design this card-->
<div class="divv">
<img src="card.jpg" alt="" width="380px">
<a class="cls" href="#">Nature</a>
<a class="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 class="cls1" href="#">Read More</a>
</div>
</body>
</html>
字符串
2条答案
按热度按时间lmvvr0a81#
在.cs1类中,我添加了
display: table;
和margin: 20px auto auto auto;
,也许你想这样做个字符
cld4siwp2#
您不能更改,因为p标记为“已阻止的元素”,而a标记为“内联元素”。您要在标记中添加margin-top,因此必须添加display:inline-block。
谢谢.