Home / Questions / 464705
Accepted
Jonas
Asked: 2022-06-26 06:08:21 +0800 CST 2022-06-26 06:08:21 +0800 CST

How to fix flipcard margin with css and html

  • 772

Hello, good, I have this flipcard that I have created but I can see it stuck to the bottom margin and I cannot add a margin to it to leave the space at the bottom of the page.

.flipscards__1 {
    position: absolute;
    margin-left: 200px;
    margin-top: 550px;
    margin-bottom: 30px;
    width: 200px;
    padding: 30px;
    background-color: whitesmoke;
    border: 2px groove;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
}

.flipscards__1:hover {
    position: absolute;
    transform: translateY(-30px);
    transition: transform 3s;
}
<div class="flipscards__1">
            <h3>Productos</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis magnam possimus itaque non maiores natus ut deleniti labore recusandae velit, cumque doloremque suscipit quidem, totam temporibus asperiores similique? Voluptatibus, harum?</p>
            <a href="">Leer Más</a>
        </div>

But when I put a margin-bottom of 20px, for example, the margin is not added and it stays stuck at the bottom of the page, how could I solve it?

html

1 Answers

  1. Best Answer

    When you use objects in absolute position, margin is not used because the position of these objects are absolute, so the instructions, top, left, right or bottom, without the margin are used to move the object, for example:

    .flipscards__1 {
    position: absolute;
    margin-left: 200px;
    margin-top: 550px;
    margin-bottom: 30px;
    width: 200px;
    padding: 30px;
    background-color: whitesmoke;
    border: 2px groove;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
}

/* Propiedad Bottom */
.flipscards__1 {
  bottom: 30px;
}

.flipscards__1:hover {
    position: absolute;
    transform: translateY(-30px);
    transition: transform 3s;
}
    <div class="flipscards__1">
            <h3>Productos</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis magnam possimus itaque non maiores natus ut deleniti labore recusandae velit, cumque doloremque suscipit quidem, totam temporibus asperiores similique? Voluptatibus, harum?</p>
            <a href="">Leer Más</a>
        </div>

    • 2