Well, I have a div
with a height set (300px) and a width
flex... Now, inside this, there is another div
, called box this div
I use to create like a border, but inside the box...
Something like that... I tried to put margin
, but it doesn't work. It's like I have to make a smaller internal box. If the size of the container were static it would be easy, I just subtract it 5px
from each side and that's it, but since width
it is flexible, well, I can't.
Basically I need an div
intern who has the samewidth -10px
The del HoverBox
is for an effect hover
, you can ignore it, just like the one div
in css
occupies 100% of the container.
.general-container {
.... display: flex ....
}
.contenedor {
position: relative;
display: inline-block;
text-align: center;
width: 50%;
max-width: 500px;
height: 250px;
background-size: cover;
object-fit: cover;
margin: 10px;
}
.Caja {
position: absolute;
width: 96%;
height: 92%;
margin: 10px 10px;
border: 2px solid rgba(247, 9, 9, 0.8);
}
<section class="general-info">
<a href="">
<div class=" image image1">
<div class="hoverBox" id="hoverBox">
<div class="Caja">
<div class="texto">Eran sus flores favoritas</div>
<div class="textoOculto">Porque los girasoles siempre le encantaron.</div>
</div>
</div>
</div>
</a>
<a href="">
<div class="image image2">
<div class="hoverBox" id="hoverBox">
<div class="Caja">
<div class="texto">Paseos en el bosque</div>
<div class="textoOculto">Para relajar el alma y mantenerte en armonía.</div>
</div>
</div>
</div>
</a>
</section>
The problem is that using a position absolute places it at a specific position relative to its first non-static ancestor, in this place the one you defined as relative . If we tell the insider that it will occupy 100% and we apply margins to it, what happens is that it goes to the outside on the right and lower side, on the other hand, if you use percentages such as 96%, it will always act differently. So you can do them in several ways, I leave 2 below, one is with a div inside another that occupies 100% and play with margin and padding. The other is to generate it by css with after or before, put it with an absolute position in top 10px and left 10px and then give it 100% width and height and subtract 20px (the 10 that run from the left + the 10 that would be inwards right)
I put together 2 examples that will serve as a reference, in both cases I added a container and left the div centered with the box inside, I put a text on the bottom left as in your example and I added a background image with an external url so that you can test the code as it is.
Example 1: With a div inside another.
Example 2: With a single div and another in an after.