padding y margin en flexbox

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

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