Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

padding y margin en flexbox

19 de abril de 2017

Buen día, tengo un problema al usar la propiedad padding y margin.

mi código es el siguiente:

<body>
 
<div class="cuerpo">
    <div class="texto">
        <div class="imag">
            <p>Aquí img</p>
        </div>
        <div class="descrip">
            <p id="titulo_n">CM & la Noticia</p>
            <p><b>10 de Abr. de 2017</b></p>
            <p>Publicación Premio Quality Colombia 2017</p>
        </div>
    </div>
 
    <div class="texto">
        <div class="imag">
            2.1
        </div>
        <div class="descrip">
            2.2
        </div>
    </div>
 
    <div class="texto">
        <div class="imag">
            3.1
        </div>
        <div class="descrip">
            3.2
        </div>
    </div>
 
    <div class="texto">
        <div class="imag">
            4.1
        </div>
        <div class="descrip">
            4.2
        </div>
    </div>
 
    <div class="texto">
        <div class="imag">
            5.1
        </div>
        <div class="descrip">
            5.2
        </div>
    </div>
 
</div>
 
</body>
*{
    margin: 0;
    padding: 0;
}
 
.cuerpo { /*PADRE FLEX*/
    width: 61.33%;
    display: flex; /* Propiedad para cajas flexibles */
    flex-direction: row; /* ordena los elementos flex en fila, de izq->der */
    flex-wrap: wrap; /* propiedad para multiples filas */
    /*flex-flow: row wrap; ------> FORMA ABREVIADA DE flex-direction & flex-wrap*/
    justify-content: flex-start; /* manera como se mostraran los Hijos flex en el eje horizontal */
    align-items: flex-start; /* como se distribuyen los hijos en el eje tranversal o perpendicular */
    align-content: space-around; /* como se agrupan los espacios entre hijos flex */
    background-color: #7ca6ba;
    margin: 0 auto;
}
 
.texto { /*HIJO FLEX*/
    display: flex; /* se coloca display:flex para poder alinear los elementos dentro del hijo flex usando las propiedades justify-content / align-items */
    width: 31.33%;
    background: #fff;
    justify-content: flex-start; /* posicion del los hijos flex */
    align-items: center;
    margin: 5px 1%; /* separacion personalizada e interna de los Hijos Flex */
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
    box-sizing: border-box; /* para que el borde no ocupe espacio por fuera del div */
}
 
.imag {
    display: flex;
    width: 35%;
    justify-content: center;
    align-items: center;
}
 
.imag img {
    max-width: 100%;
}
 
.descrip {
    width: 65%;
    padding: 5%;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    background-color: #f2f2f2;
 
}
 
#titulo_n {
    font-size: 20px;
    color: #009bde;
}
 
@media screen and (max-width: 1200px) {
 
    .cuerpo { /*PADRE FLEX*/
        width: 75.971%;
    }
 
    /*.texto { /*HIJO FLEX
        width: 31.33%;
    }*/
}
 
@media screen and (max-width: 1000px) {
 
    .cuerpo { /*PADRE FLEX*/
        width: 80.971%;
    }
 
    /*.texto { /*HIJO FLEX
        width: 31.33%;
    }*/
}
 
@media screen and (max-width: 800px) {
 
    .cuerpo { /*PADRE FLEX*/
        width: 85.971%;
    }
 
    .texto { /*HIJO FLEX*/
        width: 48%;
    }   
}
 
@media screen and (max-width: 600px) {
 
    .cuerpo { /*PADRE FLEX*/
        width: 90.971%;
    } 
}
 
@media screen and (max-width: 480px) {
 
    .cuerpo { /*PADRE FLEX*/
        width: 92.971%;
    }
 
    .texto { /*HIJO FLEX*/
        width: 98%;
    }    
}

El problema esta en que .descrip el atributo padding: 5%; no me reconoce en el padding "top y bottom" solo en los laterales "left y right" / solo me esta pasando en mozilla porque en los demás navegadores si los reconoce como corresponde. El problema parece que es con el % porque cuando lo coloco en px si se genera el padding correspondiente (pero a mi me es necesario trabajarlo en %) Quizá estoy comentiendo algun error o me falta colocar algo adicional para no tener problemas en el mozilla (la version de mi mozilla es 52.0.2) Espero me puedan ayudar. Saludos.


Respuestas

#1

alomejor es por algo de flexbox? prueba a quitarlo a ver; también puedes poner !important después de la propiedad, pero no creo que sea eso.. suerte!

@ixa13

5 mayo 2017, 18:39