¿por que no me caben los 4 div y xq se separan con un margen?

phpnovatophp · #1 (**permalink**) 05/06/2014, 10:06

Hola gente que tal?

Me podeis decir xq sigue habiendo una pequeña separacion entre los div con class=cuatro?
esta reseteado y nada. Tambien he probado a resetearlo con el reset de eric meyer y no me soluciona nada.
¿de donde son esas separaciones entre los div?

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css_e_imgs/ss.css" type="text/css" rel="stylesheet">
    <style>
        *{ margin: 0;padding: 0; box-sizing: content-box; border:none;}
        .cont{
        width: 1000px;
        margin: 0 auto;      
        }
        .cuatro{
        width: 25%;
        height: 150px;;
        background-color: #EE0000;
        display: inline-block;
        
        }
    </style>
    </head>
    <body>  
    <div class="cont">
        <div class="cuatro"></div>
        <div class="cuatro"></div>
        <div class="cuatro"></div>
        <div class="cuatro"></div>
    </div>
    </body>
</html>

pzin · #2 (**permalink**) 05/06/2014, 11:36

Usa float: left en lugar de display: inline-block.

siddartha23 · #3 (**permalink**) 05/06/2014, 18:34

Ese es el problema de los objetos posicionados con la propiedad inline-block, ya lo había comentando en otro tema, copio y pego por aquí:

Cita:

Iniciado por siddartha23

Ese espacio de 4px se crea cuando usas la propiedad display:inline-block y dejas espacios entre los objetos html que tienen esa propiedad, la solución mas elegante y funcional en todos los navegadores es comentar los espacios en blanco que dejas entre cada item en tu html, de esta manera:

Código HTML:

 <li>...</li><!--
--><li>...</li><!--
--><li>...</li><!--
--><li>...</li>

Existen otras soluciones como por ejemplo ponerles un margin-left negativo de -4px pero no lo recomiendan por que "cierto navegador" podría montar tus items unos encimas de otros, bueno, eso de comentar los espacios aunque no tenga sentido sí que funciona ...

En tu caso tendrías que comentar los saltos de línea entre div y div o ponerlos todos en una sola línea :)

pzin · #4 (**permalink**) 06/06/2014, 00:47

Cita:

Iniciado por siddartha23

Ese es el problema de los objetos posicionados con la propiedad inline-block, ya lo había comentando en otro tema, copio y pego por aquí:

En tu caso tendrías que comentar los saltos de línea entre div y div o ponerlos todos en una sola línea :)

En ese caso es casi mejor hacer:

[HIGHLIGHT="CSS"]div.cont {
font-size: 0;
}[/HIGHLIGHT

Así no andas teniendo un código horrible.

Pero como digo, es mejor flotar los elementos. No causa mayores problemas.