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

Html – Make a specific div element go down a bit

I need 2 div elements in my code to go down a slight bit, both of them

                <div class="username-and-timestamp">
                    <div class="username">RandomDude</div>
                    <div class="timestamp">17 minutes ago.</div>
                </div>

I’ve tried to use margin style on username-and-timestamp and also line-height, both did not work!

heres my css:

Heres my full code:

(CSS)

:root {
    --primary: #161720;
    --primary-lightened: #2A2B35;
}

html {
    background-color: var(--primary)
}

.post {
    width: 400px;
    border-radius: 2%;
    background-color: var(--primary-lightened);
    position: relative;
}

.third-line {
    position: absolute;
    top: 12%;
    width: 400px;
    height: 2.5px;
    background-color: var(--primary);
    /* Change this to the color you want */
}

.username {
    font-size: 18px;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}

.timestamp {
    font-size: 15px;
    color: gray;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info {
    padding-left: 65px;
}

.profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 10px;
}

.badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: auto;
}


.post-text {
    font-size: 17px;
    color: white;
    font-family: "Mukta", sans-serif;
    padding: 20px;
    /* Add this line */
    display: block;
    /* Add this line */
}

.post-actions {
    display: flex;
    justify-content: space-around;
    /* This will space the icons evenly */
    color: white;
    /* This will make the icons white */
    padding-bottom: 20px;
    /* Add this line */
}

.post-actions i:hover {
    color: pink;
    /* This will make the icons pink on hover */
}

.number {
    font-size: 16.5px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: normal;
}

I tried the line height and the margin property, did not work.
The way i tried the margin property was:

.username-and-timestamp {
    margin-bottom: (...)px;
}

Any number of pixels did not work. (even negative values).

.username-and-timestamp {
    line-height: (...)px;
}

Same here, Any number of pixels did not work. (even negative values).

My html:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/main/main.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="{{ url_for('static',filename='/scripts/main/main.js') }}"></script>
    <title>User</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <body>
        <div class="post">
            <div class="info">
                <div class="avatar-container">
                    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Profile Picture"
                        class="profile-picture">
                    <img class="badge"
                        src="https://cdn.discordapp.com/attachments/1191384595938164766/1224995524910907392/mod_badge.png?ex=661f84fc&is=660d0ffc&hm=e810c73ddf07d60a369ed7814135bdb7a59bb4be3edc32c6fd8891705967a0bb&"
                        alt="Badge" title="This post was made by an admin.">
                </div>
                <div class="username-and-timestamp">
                    <div class="username">RandomDude</div>
                    <div class="timestamp">17 minutes ago.</div>
                </div>

            </div>
            <div class="third-line"></div>
            <div class="post-content">
                <!-- Sample Content -->
                <span class="post-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                    Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
                    a galley of type and scrambled it to make a type specimen book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
                    popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                    more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                    Ipsum.</span>
            </div>
            <div class="post-actions">
                <i class="fa fa-thumbs-up"><span class="number"> 7221</span></i>
                <i class="fa fa-share"><span class="number"> 106</span></i>
            </div>
    </body>

</body>

</html>```

Changing any of those values moves the entire post down
Tags:

2

Answers


  1. 0

    is transform : translateY() an option?

    Login or Signup to reply.
  2. 0

    In my opinion there are two ways to go about this.

    1. You can use .username-and-timestamp { padding-top:(..)px; } after your timestamp element to move the container a bit lower
    2. You can use .username, .timestamp { padding-top:5px; } to give both elements (username and timestamp) a padding of 5pχ for example thus making them both go down a bit but also create 5px distance between them. Hope i helped!
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search