CODEWITHSUNDEEP
htmlcss
Anikin Skywalker
Anikin Skywalker

Reputation: 35

CSS top not working for image and its container

I am trying to make a website in which student profiles are required. The top property is not working for the image container. I've tried changing the value multiple times but it doesn't work. Even applying it on the image itself is not working. Any help will be appreciated.

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
    background-color: white;
}

.card .img-container {
    position: relative;
    width: 90%;
    left: 5%;
    height: 45%;
    top: 10%;
}

.card .img-container img {
    width: 100%;
    position: relative;
}
  
.card p {
    color: #000;
    font-size: 18px;
}

.card .name {
      font-weight: 700;
}

.card table {
    width: 90%;
    left: 5%;
    text-align: center;
    position: relative;
    border-spacing: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main">
        <div class="card">
            <div class="img-container"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/circle-270-1156833.png"></div>
            <p class="name">Name</p>
            <p>Total Bands</p>
            <table>
                <tr>
                    <td>Reading: </td><td>Speaking: </td>
                </tr>
                <tr>
                    <td>Listening: </td><td>Writing: </td>
                </tr>
            </table>
            <br><br>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 628

Answers (1)

Tamas Szoke
Tamas Szoke

Reputation: 5542

If I understand correctly you need padding-top:

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
    background-color: white;
}

.card .img-container {
    position: relative;
    width: 90%;
    left: 5%;
    height: 45%;
    top: 10%;
    padding-top: 5%;
}

.card .img-container img {
    width: 100%;
    position: relative;
}
  
.card p {
    color: #000;
    font-size: 18px;
}

.card .name {
      font-weight: 700;
}

.card table {
    width: 90%;
    left: 5%;
    text-align: center;
    position: relative;
    border-spacing: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main">
        <div class="card">
            <div class="img-container"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/circle-270-1156833.png"></div>
            <p class="name">Name</p>
            <p>Total Bands</p>
            <table>
                <tr>
                    <td>Reading: </td><td>Speaking: </td>
                </tr>
                <tr>
                    <td>Listening: </td><td>Writing: </td>
                </tr>
            </table>
            <br><br>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Related Questions