I'm new to WebDev, so please bear with me as I explain my issue. I've created colored squares on a website using CSS properties – 70% width, 0 height, and 70% padding. These squares form a box grid, each containing an h2 element styled as follows:
color: $white;
position: absolute;
bottom: -3%;
margin-left: -0.5%;
The styling for the boxes themselves is as follows:
background-color: $primary;
width: 70%;
height: 0;
padding-bottom: 70%;
Currently, these boxes align perfectly in terms of height, thanks to Bootstrap's three boxes per row setup. However, I'm struggling to add vertical spacing between each box.
I've attempted to use margin, but it interferes with the positioning of the h2 element and doesn't allow me to move it further down. Padding also doesn't seem to create the desired effect.
My objective is to introduce a gap between each box vertically and include a single line p tag within that space. Here is a snippet of the source code:
.box-1-1 {
background-color: $primary;
width: 70%;
height: 0;
padding-bottom: 70%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="col-4">
<div class="box-1-1">
<h2 class="boxes">RDA EXPO</h2>
</div>
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>I have repeated this process 12 times, creating three boxes per row.