1

PHP:

<div class="wrapper-fila">
    <input type="text" readonly class="celda clave" value='<?= $rows["id_registro"] ?>'>
    <select id="municipio" class="celda corto prueba">
        <option selected="true" disabled="disabled"><?= $rows['municipio'] ?></option>
        <option>Veracruz</option>
        <option>Boca del Rio</option>
    </select>
    <input type="text" class="celda corto" value='<?= $rows["escritura"] ?>'>
    <input type="text" class="celda nombres" value='<?= $rows["enajenante"] ?>'>
    <input type="text" class="celda nombres" value='<?= $rows["adquiriente"] ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["primer_aviso"]) ?>'>
    <div class="prueba123">Elige un archivo</div> <!-- Este DIV es el problema -->
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["entrega_primer"]) ?>'>
    <input type="text" class="celda corto" value='<?= $rows["costo_primer"] ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["segundo_aviso"]) ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["testimonio"]) ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["entrega_testimonio"]) ?>'>
    <input type="text" class="celda corto" value='<?= $rows["costo_testimonio"] ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["fecha_pago"]) ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["fecha_salida"]) ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["fecha_entrega"]) ?>'>
    <input type="text" class="celda corto" value='<?= $rows["costo"] ?>'>
</div>

CSS:

.wrapper-fila{
    width: 1000px;
    white-space: nowrap; 
    font-size: 0px; /* Esto es para que no existan espacios en blanco entre los DIV contenidos */
}

.celda{
    width: 160px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    min-height: 25px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    display: inline-block;
    border: 1px solid #000;
    /*word-break: break-word;*/
}

.prueba123{
    width: 160px;
    min-height: 25px;
    background-color: yellow;
    color: #000;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    display: inline-block;
    border:1px solid #000;
    margin: 0px;
    padding: 0px;
    outline:0px;
}

Me aparece de esta forma:

introducir la descripción de la imagen aquí

Es como si tuviera un margin o un padding pero ambos estan en 0, no entiendo. Las otras clases como corto, nombres y fecha no tienen mas que el ancho en pixeles.

2
  • ponle la clase celda tambien al div y veamos los resultados.
    – user46896
    Commented el 12 jul. 2017 a las 16:16
  • Lo hice, y aparece el mismo espacio. Es cosa de la etiqueta por lo que veo, porque de hecho lo que yo queria colocar en un principio ahi era un label, pero puse el DIV para hacer pruebas. La unica forma de que no aparezca el espacio es si pongo un input, pero yo necesito poner un label ahi. Commented el 12 jul. 2017 a las 16:20

2 respuestas 2

0

El problema son los cuatro pixeles que normalmente son agregados para los descenders, una solución rápida en este caso es agregarle vertical-align: top al div "afectado.

NOTA: Esta es una solución rápida, no definitiva al problema.

.wrapper-fila{
    width: 1000px;
    white-space: nowrap; 
    font-size: 0px; /* Esto es para que no existan espacios en blanco entre los DIV contenidos */
}

.celda{
    width: 160px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    min-height: 25px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    display: inline-block;
    border: 1px solid #000;
    /*word-break: break-word;*/
}

.prueba123{
    width: 160px;
    min-height: 25px;
    background-color: yellow;
    color: #000;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    display: inline-block;
    border:1px solid #000;
    margin: 0px;
    padding: 0px;
    outline:0px;
    vertical-align: top;
}
<div class="wrapper-fila">
    <input type="text" readonly class="celda clave" value='<?= $rows["id_registro"] ?>'>
    <select id="municipio" class="celda corto prueba">
        <option selected="true" disabled="disabled"><?= $rows['municipio'] ?></option>
        <option>Veracruz</option>
        <option>Boca del Rio</option>
    </select>
    <input type="text" class="celda corto" value='<?= $rows["escritura"] ?>'>
    <input type="text" class="celda nombres" value='<?= $rows["enajenante"] ?>'>
    <input type="text" class="celda nombres" value='<?= $rows["adquiriente"] ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["primer_aviso"]) ?>'>
    <div class="prueba123">Elige un archivo</div> <!-- Este DIV es el problema -->
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["entrega_primer"]) ?>'>
    <input type="text" class="celda corto" value='<?= $rows["costo_primer"] ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["segundo_aviso"]) ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["testimonio"]) ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["entrega_testimonio"]) ?>'>
    <input type="text" class="celda corto" value='<?= $rows["costo_testimonio"] ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["fecha_pago"]) ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["fecha_salida"]) ?>'>
    <input type="text" class="celda fecha" value='<?= cambiarFecha($rows["fecha_entrega"]) ?>'>
    <input type="text" class="celda corto" value='<?= $rows["costo"] ?>'>
</div>

6
  • o display: block
    – user46896
    Commented el 12 jul. 2017 a las 16:21
  • @FranciscoNúñez esa sería una solución "menos rápida", pues habría que poner los elementos a flotar. De hecho podría también solucionarlo con flexbox y hasta con grids.
    – Shaz
    Commented el 12 jul. 2017 a las 16:23
  • que mejor implemente bootstraps :)
    – user46896
    Commented el 12 jul. 2017 a las 16:23
  • y de paso soluciona todos los problemas de diseño :)
    – user46896
    Commented el 12 jul. 2017 a las 16:23
  • getbootstrap.com/customize
    – user46896
    Commented el 12 jul. 2017 a las 16:26
0

Dependiendo del navegador (Chrome, Edge, Firefox, etc.) se agregan diferentes estilos por defecto, para evitar estas diferencia entre los navegadores se agregan previamente estilos que limpien estos comportamientos por defecto. Puedes encontrar un reset de css en esta página http://html5doctor.com/html-5-reset-stylesheet/ y probar si con esto se soluciona.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.