Why does a space appear between these divs?

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;
}

It appears to me this way:

It's like I have a margin or a padding but both are at 0, I do not understand. The other classes such as short, names and date do not have more than the width in pixels.

    
asked by Oscar Díaz 12.07.2017 в 18:05
source

2 answers

0

The problem is the four pixels that are usually added to the descenders , a quick solution in this case is to add vertical-align: top to the "affected" div.

NOTE: This is a quick, not definitive solution to the problem.

.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>
    
answered by 12.07.2017 / 18:19
source
0

Depending on the browser (Chrome, Edge, Firefox, etc.) different styles are added by default, to avoid these differences between browsers, styles that clean these behaviors by default are added beforehand. You can find a css reset on this page link and test if this is solved.

    
answered by 12.07.2017 в 18:28