Html Question posted in
Some basic documentation can be found here.

I've a given a html and css code and facing a issue in it

The margin given to .cls1 which is the a tag, is not getting applied. The left and right margin is applied, but not the top.

I’m trying to shift my "read more" button downwards but the given margin is not getting applied from the top.

Please don’t give me a new approach for solving this, just tell me the reason or the shortcomings that are not allowing the 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>
Tags:

2

Answers


  1. 0

    In .cs1 class I have added display: table; and margin: 20px auto auto auto;, maybe you want to do something like this

    .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: 20px auto auto auto;
      display: table;
    }

    .diva {
      text-align: center;
      margin: 30px;
    }
    <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>
    Login or Signup to reply.
  2. 0

    You can’t change because p tag is Blocked Element and a tag is Inline Element . You want to add margin-top in tag , so you must be add a display:inline-block .

    Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search