Home / Questions / 124909
Accepted
omaza1990
Asked: 2020-12-15 13:55:01 +0800 CST 2020-12-15 13:55:01 +0800 CST

How to add vertical space between elements in div? CSS

  • 772

I have an inventory of accessories on my website.

I want to group all of them into a (group) div, which in turn contains another (individual) div. Inside each div (individual), insert the image of each accessory along with its name and a checkbox next to it. I have preferably decided to -order them- 3 by 3, giving each of them "30%" and floating to the left.

<div style='float:left; width:30%'>

View image: enter image description here

So far everything is correct. Now the doubt/question: how can I add a vertical space, I think padding should be used to separate the elements of one row and another row?

I add the code:

<div class="mostrar_accesorios" id="mostrar_accesorios">
    <center>
    <h3><b>Accesorios</b></h3><br/>
    <?php 
        $objeto_accesorios = BD::obtenerAccesoriosPorCabana($_REQUEST["idcabana"]);
        $todos_accesorios = BD::todosAccesorios();
        foreach($todos_accesorios as $objeto){
            $existe = false;
            foreach($objeto_accesorios as $columna){
                //Si el accesorio global está en el accesorio de la cabaña, true.
                if($objeto->getIdaccesorio() == $columna->getIdaccesorio()){
                    $existe = true;
                    break;
                }
            }
            if($existe){
                echo "<div style='float:left; width:30%'><img src='imagenes/".$objeto->getDescripcion().".png' height='28px' width='34px' title='".$objeto->getDescripcion()."'/><br/><label for='accesorio".$objeto->getIdaccesorio()."'><input type='checkbox' value='".$objeto->getIdaccesorio()."' id='accesorio".$objeto->getIdaccesorio()."' name='accesorios[]' checked>".$objeto->getDescripcion()."</label></div>";
            }else{
                echo "<div style='float:left; width:30%'><img src='imagenes/".$objeto->getDescripcion().".png' height='28px' width='34px' title='".$objeto->getDescripcion()."'/><br/><label for='accesorio".$objeto->getIdaccesorio()."'><input type='checkbox' value='".$objeto->getIdaccesorio()."' id='accesorio".$objeto->getIdaccesorio()."' name='accesorios[]'>".$objeto->getDescripcion()."</label></div>";
            }
            $existe = false;        
        }
    ?>
    <div style="clear:left"></div>
    </center>
</div>
html

2 Answers

  1. Best Answer

    All you have to do is add diva margin-bottom:

    echo "<div style='float:left; width:30%; margin-bottom: 20px'><img src='imagenes/".$objeto->getDescripcion().".png' height='28px' width='34px' title='".$objeto->getDescripcion()."'/><br/><label for='accesorio".$objeto->getIdaccesorio()."'><input type='checkbox' value='".$objeto->getIdaccesorio()."' id='accesorio".$objeto->getIdaccesorio()."' name='accesorios[]'>".$objeto->getDescripcion()."</label></div>";

    functional example

    .caja{
  float: left;
  width: calc(30% - 20px);
  height: 150px;
  background: black;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
}

.caja:nth-child(2n){
  background: chocolate;
}

.caja:nth-child(2n + 1){
  background: green;
}
    <div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

    • 7 

  2.       #div1, #div2, #div3 {background-color: #f4f4f4; margin: 5px; width: 50px; height: 80px;}
        #div2 {margin-top: 0px; margin-bottom: 0px; !important
    <!DOCTYPE>
<html>
<head>
    <title>Divs with Margins</title>

</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

    You can maybe do that with the 'margin' element of the css. I leave you an example where they are separated by 5px both above and below, except for div2 that only has a margin on the sides. Although I see that there is already a better answer than mine

    • 5