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

Как добавить вертикальное пространство между элементами в div? CSS

  • 772

У меня есть каталог аксессуаров на моем сайте.

Я хочу сгруппировать их все в (групповой) div, который, в свою очередь, содержит другой (индивидуальный) div. Внутри каждого div (индивидуального) вставьте изображение каждого аксессуара вместе с его названием и флажком рядом с ним. Я предпочитаю упорядочивать их 3 на 3, давая каждому из них «30%» и плавая влево.

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

Посмотреть изображение: введите описание изображения здесь

Пока все правильно. Теперь сомнение/вопрос: как мне добавить вертикальное пространство, я думаю, что отступы должны использоваться для разделения элементов одной строки и другой строки?

Я добавляю код:

<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

    Все, что вам нужно сделать, это divдобавить 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>";

    функциональный пример

    .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>

    Возможно, вы можете сделать это с помощью элемента «margin» CSS. Я оставляю вам пример, где они разделены 5px как сверху, так и снизу, за исключением div2, который имеет поля только по бокам. Хотя я вижу, что уже есть лучший ответ, чем мой

    • 5